<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>常见前端面试题 | XC's Blog</title><meta name="keywords" content="面试题"><meta name="author" content="XC's Blog"><meta name="copyright" content="XC's Blog"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="1.重绘和回流1.浏览器是如何进行界面渲染的   解析 (Parser) HTML, 生成DOM树(DOM Tree) 同时解析 (Parser) CSS, 生成样式规则(Style Rules) 根据DOM树和样式规则, 生成渲染树(Render Tree) 进行布局 Layout(回流&#x2F;重排):根据生成的渲染树, 得到节点的几何信息 (位置，大小) 进行绘制 Painting(重绘)"><meta property="og:type" content="article"><meta property="og:title" content="常见前端面试题"><meta property="og:url" content="https://webxc.eu.org/post/ds23/index.html"><meta property="og:site_name" content="XC&#39;s Blog"><meta property="og:description" content="1.重绘和回流1.浏览器是如何进行界面渲染的   解析 (Parser) HTML, 生成DOM树(DOM Tree) 同时解析 (Parser) CSS, 生成样式规则(Style Rules) 根据DOM树和样式规则, 生成渲染树(Render Tree) 进行布局 Layout(回流&#x2F;重排):根据生成的渲染树, 得到节点的几何信息 (位置，大小) 进行绘制 Painting(重绘)"><meta property="og:locale" content="zh_CN"><meta property="og:image" content="https://cdn1.tianli0.top/gh/web-xc/iMG/postss/vue.png"><meta property="article:published_time" content="2023-08-28T18:30:00.000Z"><meta property="article:modified_time" content="2023-08-30T18:00:49.037Z"><meta property="article:author" content="XC&#39;s Blog"><meta property="article:tag" content="面试题"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://cdn1.tianli0.top/gh/web-xc/iMG/postss/vue.png"><link rel="shortcut icon" href="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg"><link rel="canonical" href="https://webxc.eu.org/post/ds23/"><link rel="preconnect" href="//cdn.jsdelivr.net"><link rel="preconnect" href="//busuanzi.ibruce.info"><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://npm.elemecdn.com/@fortawesome/fontawesome-free@6.2.0/css/all.min.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://npm.elemecdn.com/node-snackbar/dist/snackbar.min.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://npm.elemecdn.com/@fancyapps/ui/dist/fancybox.css" media="print" onload='this.media="all"'><script>const GLOBAL_CONFIG={root:"/",algolia:void 0,localSearch:{path:"/search.xml",preload:!1,languages:{hits_empty:"找不到您查询的内容：${query}"}},translate:void 0,noticeOutdate:void 0,highlight:{plugin:"highlighjs",highlightCopy:!0,highlightLang:!0,highlightHeightLimit:!1},copy:{success:"吾辈宣布,你的剪切板已被占领",error:"呀~复制失败,请在尝试下",noSupport:"对不起,你的浏览器不支持"},relativeDate:{homepage:!1,post:!1},runtime:"",date_suffix:{just:"刚刚",min:"分钟前",hour:"小时前",day:"天前",month:"个月前"},copyright:{limitCount:60,languages:{author:"作者: XC's Blog",link:"链接: ",source:"来源: XC's Blog",info:"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},lightbox:"fancybox",Snackbar:{chs_to_cht:"您已切换为繁体",cht_to_chs:"您已切换为简体",day_to_night:"您已切换为深色主题",night_to_day:"您已切换为浅色主题",bgLight:"#3b70fc",bgDark:"#121212",position:"bottom-center"},source:{justifiedGallery:{js:"https://npm.elemecdn.com/flickr-justified-gallery/dist/fjGallery.min.js",css:"https://npm.elemecdn.com/flickr-justified-gallery/dist/fjGallery.css"}},isPhotoFigcaption:!1,islazyload:!0,isAnchor:!0}</script><script id="config-diff">var GLOBAL_CONFIG_SITE={title:"常见前端面试题",isPost:!0,isHome:!1,isHighlightShrink:!1,isToc:!0,postUpdate:"2023-08-30 18:00:49"}</script><noscript><style>#nav{opacity:1}.justified-gallery img{opacity:1}#post-meta time,#recent-posts time{display:inline!important}</style></noscript><script>(e=>{e.saveToLocal={set:function(e,t,o){if(0===o)return;const n=864e5*o,a={value:t,expiry:(new Date).getTime()+n};localStorage.setItem(e,JSON.stringify(a))},get:function(e){const t=localStorage.getItem(e);if(!t)return;const o=JSON.parse(t);if(!((new Date).getTime()>o.expiry))return o.value;localStorage.removeItem(e)}},e.getScript=e=>new Promise(((t,o)=>{const n=document.createElement("script");n.src=e,n.async=!0,n.onerror=o,n.onload=n.onreadystatechange=function(){const e=this.readyState;e&&"loaded"!==e&&"complete"!==e||(n.onload=n.onreadystatechange=null,t())},document.head.appendChild(n)})),e.activateDarkMode=function(){document.documentElement.setAttribute("data-theme","dark"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","#0d0d0d")},e.activateLightMode=function(){document.documentElement.setAttribute("data-theme","light"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","#ffffff")};const t=saveToLocal.get("theme");"dark"===t?activateDarkMode():"light"===t&&activateLightMode();const o=saveToLocal.get("aside-status");void 0!==o&&("hide"===o?document.documentElement.classList.add("hide-aside"):document.documentElement.classList.remove("hide-aside"));/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)&&document.documentElement.classList.add("apple")})(window)</script><link rel="stylesheet" href="https://cdn1.tianli0.top/gh/web-xc/My-blog-CSS/mgi.css"><link rel="stylesheet" href="https://cdn1.tianli0.top/gh/web-xc/My-blog-CSS/mg111.css"><link rel="stylesheet" href="https://npm.elemecdn.com/webxc@1.0.16/css/mg2.css"><link rel="stylesheet" href="https://npm.elemecdn.com/webxc@1.0.11/css/styless.css"><link rel="stylesheet" href="https://npm.elemecdn.com/webxc@1.0.11/css/styles.css"><link rel="stylesheet" href="https://npm.elemecdn.com/webxc@1.0.11/css/font.css"><link rel="stylesheet" href="https://npm.elemecdn.com/webxc@1.0.15/css/font2.css"><link rel="stylesheet" href="https://npm.elemecdn.com/webxc@1.0.12/css/swiper/swiper.min.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://npm.elemecdn.com/webxc@1.0.12/css/swiper/swiperstyle.css" media="print" onload='this.media="all"'><meta name="generator" content="Hexo 6.3.0"></head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg" onerror='onerror=null,src="https://npm.elemecdn.com/webxc@1.0.2/banner/404.gif"' alt="avatar"></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">95</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">25</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">25</div></a></div><hr><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw iconfont icon-shouye"></i> <span>首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw iconfont icon-shijian"></i> <span>时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw iconfont icon-biaoqian"></i> <span>标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw iconfont icon-fenlei"></i> <span>分类</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw iconfont icon-lianxiwomen"></i> <span>友联</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw iconfont icon-iconzhengli-"></i> <span>关于</span></a></div><div class="menus_item"><a class="site-page group hide" href="javascript:void(0);"><i class="fa-fw iconfont icon-a-wangzhanchaojilianjiehulianwang"></i> <span>推荐</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" target="_blank" rel="noopener" href="http://www.inode.club/"><i class="fa-fw fa-sharp fa-solid fa-square-rss"></i> <span>程序员指南</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="http://ife.baidu.com/"><i class="fa-fw fa-brands fa-vuejs"></i> <span>前端技术学园</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://www.yuque.com/tademanong/ag7q4n"><i class="fa-fw fa-solid fa-users"></i> <span>前端技术圈</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://www.code-nav.cn/"><i class="fa-fw fa-solid fa-shop"></i> <span>编程导航</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://q.shanyue.tech/"><i class="fa-fw fa-brands fa-square-js"></i> <span>每日一题</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://fanyouf.gitee.io/u1word/#/h5"><i class="fa-fw fa-solid fa-headphones"></i> <span>前端必会单词</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://site.51git.cn/render/gonav/4.html"><i class="fa-fw iconfont icon-wangzhandingzhi"></i> <span>网址导航</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://www.webxc.eu.org/music/"><i class="fa-fw iconfont icon-musical-note"></i> <span>音乐解锁</span></a></li></ul></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image:url('https://cdn1.tianli0.top/gh/web-xc/iMG/postss/vue.png')"><nav id="nav"><span id="blog_name"><div class="back-home-button" tabindex="-1"><i class="back-home-button-icon fas fa-grip-vertical"></i><div class="back-menu-list-groups"><div class="back-menu-list-group"><div class="back-menu-list-title">项目</div><div class="back-menu-list"><a class="back-menu-item" href="/" title="前往博客主页" target="_blank" one-link-mark="yes"><img class="back-menu-item-icon" src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg"><span class="back-menu-item-text">主站</span></a><a class="back-menu-item" href="https://e.webxc.eu.org/" rel="external nofollow" title="前往学习笔记" target="_blank" one-link-mark="yes"><img class="back-menu-item-icon" src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg"><span class="back-menu-item-text">学习笔记</span></a><a class="back-menu-item" href="https://v.webxc.eu.org/" rel="external nofollow" title="VuePress学习文档" target="_blank" one-link-mark="yes"><img class="back-menu-item-icon" src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg"><span class="back-menu-item-text">VuePress文档</span></a><a class="back-menu-item" href="https://b.webxc.eu.org/" rel="external nofollow" title="旧站Hexo" target="_blank" one-link-mark="yes"><img class="back-menu-item-icon" src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg"><span class="back-menu-item-text">旧站Hexo</span></a><a class="back-menu-item" href="https://gridea.webxc.eu.org/" rel="external nofollow" title="Gridea笔记" target="_blank" one-link-mark="yes"><img class="back-menu-item-icon" src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg"><span class="back-menu-item-text">Gridea笔记</span></a><a class="back-menu-item" href="https://c.webxc.eu.org/" rel="external nofollow" title="魔改Hexo" target="_blank" one-link-mark="yes"><img class="back-menu-item-icon" src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg"><span class="back-menu-item-text">魔改Hexo</span></a></div></div><div class="back-menu-list-group"><div class="back-menu-list-title">博客镜像</div><div class="back-menu-list"><a class="back-menu-item" href="https://blog.webxc.eu.org/" title="Vercel镜像" target="_blank" rel="noopener nofollow" one-link-mark="yes"><img class="back-menu-item-icon" src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg"><span class="back-menu-item-text">Vercel镜像</span></a><a class="back-menu-item" href="https://webxc.tk/" title="Netlify镜像" target="_blank" rel="noopener nofollow" one-link-mark="yes"><img class="back-menu-item-icon" src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg"><span class="back-menu-item-text">Netlify镜像</span></a><a class="back-menu-item" href="https://web-xc.gitee.io/" title="Gitee镜像" target="_blank" rel="noopener nofollow" one-link-mark="yes"><img class="back-menu-item-icon" src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg"><span class="back-menu-item-text">Gitee镜像</span></a><a class="back-menu-item" href="https://cf.webxc.eu.org/" title="Cloudflare镜像" target="_blank" rel="noopener nofollow" one-link-mark="yes"><img class="back-menu-item-icon" src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg"><span class="back-menu-item-text">Cloudflare镜像</span></a><a class="back-menu-item" href="https://render.webxc.eu.org/" title="Render镜像" target="_blank" rel="noopener nofollow" one-link-mark="yes"><img class="back-menu-item-icon" src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg"><span class="back-menu-item-text">Render镜像</span></a></div></div></div></div><a id="site-name" href="/"><div class="title">XC's Blog</div><i class="fa-solid fa-house"></i></a></span><div class="mask-name-container"><center id="name-container"><a id="page-name" href="javascript:btf.scrollToDest(0, 500)">PAGE_NAME</a></center></div><div id="menus"><div class="nav-button" id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i> <span>搜索</span></a></div><div class="nav-button" id="darkmode_navswitch"><a class="darkmode_switchbutton" type="button" title="浅色和深色模式转换" onclick="switchDarkMode()"><i class="fas fa-adjust"></i></a></div><div class="nav-button" id="nav-totop"><a class="totopbtn"><i class="fas fa-arrow-up"></i><span id="percent" onclick="btf.scrollToDest(0,500)">0</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw iconfont icon-shouye"></i> <span>首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw iconfont icon-shijian"></i> <span>时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw iconfont icon-biaoqian"></i> <span>标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw iconfont icon-fenlei"></i> <span>分类</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw iconfont icon-lianxiwomen"></i> <span>友联</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw iconfont icon-iconzhengli-"></i> <span>关于</span></a></div><div class="menus_item"><a class="site-page group hide" href="javascript:void(0);"><i class="fa-fw iconfont icon-a-wangzhanchaojilianjiehulianwang"></i> <span>推荐</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" target="_blank" rel="noopener" href="http://www.inode.club/"><i class="fa-fw fa-sharp fa-solid fa-square-rss"></i> <span>程序员指南</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="http://ife.baidu.com/"><i class="fa-fw fa-brands fa-vuejs"></i> <span>前端技术学园</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://www.yuque.com/tademanong/ag7q4n"><i class="fa-fw fa-solid fa-users"></i> <span>前端技术圈</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://www.code-nav.cn/"><i class="fa-fw fa-solid fa-shop"></i> <span>编程导航</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://q.shanyue.tech/"><i class="fa-fw fa-brands fa-square-js"></i> <span>每日一题</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://fanyouf.gitee.io/u1word/#/h5"><i class="fa-fw fa-solid fa-headphones"></i> <span>前端必会单词</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://site.51git.cn/render/gonav/4.html"><i class="fa-fw iconfont icon-wangzhandingzhi"></i> <span>网址导航</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://www.webxc.eu.org/music/"><i class="fa-fw iconfont icon-musical-note"></i> <span>音乐解锁</span></a></li></ul></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">常见前端面试题</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-08-28T18:30:00.000Z" title="发表于 2023-08-28 18:30:00">2023-08-28</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2023-08-30T18:00:49.037Z" title="更新于 2023-08-30 18:00:49">2023-08-30</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E9%9D%A2%E8%AF%95%E9%A2%98/">面试题</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span data-flag-title="常见前端面试题"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="twikoo_visitors"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="1-重绘和回流"><a href="#1-重绘和回流" class="headerlink" title="1.重绘和回流"></a>1.重绘和回流</h2><h4 id="1-浏览器是如何进行界面渲染的"><a href="#1-浏览器是如何进行界面渲染的" class="headerlink" title="1.浏览器是如何进行界面渲染的"></a>1.浏览器是如何进行界面渲染的</h4><img src="" data-lazy-src="https://pic5.58cdn.com.cn/nowater/webim/big/n_v2cf34c4412202410d823c1519c3e6c7de.jpg" style="zoom:33%"><ol><li>解析 (Parser) HTML, 生成DOM树(DOM Tree)</li><li>同时解析 (Parser) CSS, 生成样式规则(Style Rules)</li><li>根据DOM树和样式规则, 生成渲染树(Render Tree)</li><li>进行布局 Layout(回流&#x2F;重排):根据生成的渲染树, 得到节点的几何信息 (位置，大小)</li><li>进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制</li><li>Display: 展示在页面上</li></ol><h4 id="2-重绘和回流-重排"><a href="#2-重绘和回流-重排" class="headerlink" title="2.重绘和回流(重排)"></a>2.重绘和回流(重排)</h4><ol><li>回流(重排): 当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过 程称为 回流</li><li>重绘: 由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如：color、background-color、 outline等), 称为重绘</li><li><strong>重绘不一定引起回流，而回流一定会引起重绘</strong></li></ol><h4 id="3-会导致回流（重排）的操作："><a href="#3-会导致回流（重排）的操作：" class="headerlink" title="3.会导致回流（重排）的操作："></a>3.会导致回流（重排）的操作：</h4><ol><li>页面的首次刷新</li><li>浏览器的窗口大小发生改变</li><li>元素的大小或位置发生改变</li><li>改变字体的大小</li><li>内容的变化（如：input框的输入，图片的大小）</li><li>激活css伪类 （如：:hover）</li><li>脚本操作DOM（添加或者删除可见的DOM元素） <strong>简单理解影响到布局了，就会有回流</strong></li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = <span class="variable language_">document</span>.<span class="property">body</span>.<span class="property">style</span></span><br><span class="line">a.<span class="property">padding</span> = <span class="string">&#x27;2px&#x27;</span>         <span class="comment">// 重排 + 重绘</span></span><br><span class="line">a.<span class="property">border</span> = <span class="string">&#x27;1px solid red&#x27;</span><span class="comment">// 再一次 重排 + 重绘</span></span><br><span class="line">a.<span class="property">color</span> = <span class="string">&#x27;red&#x27;</span>           <span class="comment">// 再一次重绘</span></span><br><span class="line">a.<span class="property">backgroundColor</span> = <span class="string">&#x27;red&#x27;</span> <span class="comment">// 再一次重绘</span></span><br><span class="line">a.<span class="property">fontSize</span> = <span class="string">&#x27;16px&#x27;</span>       <span class="comment">// 再一次 重排 + 重绘</span></span><br></pre></td></tr></table></figure><h2 id="2-两个定时器对比"><a href="#2-两个定时器对比" class="headerlink" title="2.两个定时器对比"></a>2.两个定时器对比</h2><ol><li>间歇函数 重复执行 首次延迟执行</li><li>延迟函数 只执行1次</li></ol><h2 id="3-JS执行机制"><a href="#3-JS执行机制" class="headerlink" title="3.JS执行机制"></a>3.JS执行机制</h2><p>同步: 前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的</p><p>异步: 你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情</p><ul><li>同步: 同步任务都在主线程上执行，形成一个执行栈</li><li>异步: 任务&#x2F;消息队列, JS异步通过回调函数实现, (事件、资源加载load、error、定时器)</li><li>异步任务相关添加到任务队列中 (任务队列也称为消息队列)</li></ul><ol><li>先执行执行栈的同步任务</li><li>异步任务放入任务队列中</li><li>同步任务执行完 系统按次序读取异步任务, 异步任务结束等待状态, 进入执行栈执行</li><li>主线程重复获得任务、执行任务、再获取任务、再执行 这种机制称事件循环event loop</li><li><img src="" data-lazy-src="https://pic5.58cdn.com.cn/nowater/webim/big/n_v2d069a2891f4c4179a62a9bbf9e47a497.jpg" style="zoom:33%"></li></ol><h2 id="4-作用域链"><a href="#4-作用域链" class="headerlink" title="4.作用域链"></a>4.作用域链</h2><ol><li>作用域链本质上是底层的变量查找机制</li><li>在函数被执行时，会优先查找当前函数作用域中查找变量</li><li>如果当前作用域查找不到则会依次逐级查找父级作用域直到全局作用域</li><li>嵌套关系的作用域串联起来形成了作用域链</li><li>相同作用域链中按着从小到大的规则查找变量</li><li>子作用域能够访问父作用域，父级作用域无法访问子级作用域</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = <span class="number">1</span></span><br><span class="line"><span class="keyword">let</span> b = <span class="number">2</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">say</span>(<span class="params"></span>) &#123;</span><br><span class="line">   <span class="keyword">let</span> a = <span class="number">11</span></span><br><span class="line">   <span class="variable language_">console</span>.<span class="title function_">log</span>(a)</span><br><span class="line">   <span class="keyword">function</span> <span class="title function_">say1</span>(<span class="params"></span>) &#123;</span><br><span class="line">       <span class="comment">// 子作用域可以访问父作用域 父不能访问子</span></span><br><span class="line">       <span class="comment">// 逐级查找子父级 直到找到全局作用域</span></span><br><span class="line">       a = <span class="number">22</span></span><br><span class="line">       <span class="variable language_">console</span>.<span class="title function_">log</span>(a)</span><br><span class="line">   &#125;</span><br><span class="line">   <span class="title function_">say1</span>()</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">say</span>()</span><br></pre></td></tr></table></figure><h2 id="5-闭包"><a href="#5-闭包" class="headerlink" title="5.闭包"></a>5.闭包</h2><ol><li>一个函数对周围状态的引用捆绑在一起，内层函数中访问到其外层函数的作用域</li><li>简单理解：闭包 &#x3D; 内层函数 + 外层函数的变量</li><li>闭包作用：封闭数据，提供操作，外部也可以访问函数内部的变量</li><li>闭包应用：实现数据的私有: 比如统计函数调用次数, 函数调用一次, 就++</li><li><strong>闭包可能引起内存泄漏</strong></li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 常见闭包形式 外部可访问使用 函数内部的变量</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">say</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> num2 = <span class="number">10</span></span><br><span class="line">    <span class="keyword">function</span> <span class="title function_">say1</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(num2)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> say1</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// say() == say1() == function say() &#123;&#125;</span></span><br><span class="line"><span class="keyword">const</span> fun = <span class="title function_">say</span>()</span><br><span class="line"><span class="title function_">fun</span>() <span class="comment">// 调用函数</span></span><br><span class="line"><span class="comment">// 闭包的应用 统计函数被调次数(实现数据的私有)</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fnn</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> num4 = <span class="number">0</span></span><br><span class="line">    <span class="keyword">function</span> <span class="title function_">fnn1</span>(<span class="params"></span>) &#123;</span><br><span class="line">        num4++</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(num4)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> fnn1</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 不会被回收 但会一直会被清除标记找到而调用 导致内存泄漏</span></span><br><span class="line"><span class="keyword">const</span> funs = <span class="title function_">fnn</span>()</span><br><span class="line"><span class="title function_">funs</span>()</span><br><span class="line"><span class="title function_">funs</span>()</span><br></pre></td></tr></table></figure><h2 id="6-this指向"><a href="#6-this指向" class="headerlink" title="6.this指向"></a>6.this指向</h2><ol><li>普通函数this指向调用者 window</li><li>箭头函数不会创建this 是上一层作用域链的this</li></ol><h2 id="7-构造函数实例化过程"><a href="#7-构造函数实例化过程" class="headerlink" title="7.构造函数实例化过程"></a>7.构造函数实例化过程</h2><ul><li>构造函数是创建对象的函数 可快速创建多个类似对象 命名大写开头 通过new操作</li><li>通过new关键字调用行为叫: 实例化</li><li>构造函数无需return 如果返回就是新对象 且返回的值无效</li><li>new Object new Data 都是实例化构造函数</li><li>没有参数时可省略() 不建议</li></ul><ol><li><p>创建空对象</p></li><li><p>this指向空对象</p></li><li><p>执行函数代码 修改this 添加属性</p></li><li><p>返回新对象</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Pig</span>(<span class="params">uname, age</span>) &#123;</span><br><span class="line">    <span class="comment">// this指向obj对象 </span></span><br><span class="line">    <span class="comment">// name, ages是属性 name是形参 </span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">name</span> = uname</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">ages</span> = age</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">new</span> <span class="title class_">Pig</span>(<span class="string">&#x27;佩奇&#x27;</span>, <span class="number">18</span>))</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">new</span> <span class="title class_">Pig</span>(<span class="string">&#x27;乔治&#x27;</span>, <span class="number">15</span>))</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Fn</span>(<span class="params">name, age</span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">n</span> = name</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">a</span> = age</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;小城&#x27;</span>, <span class="number">18</span>)</span><br></pre></td></tr></table></figure></li></ol><h2 id="8-基本包装类型也有属性和方法-为啥"><a href="#8-基本包装类型也有属性和方法-为啥" class="headerlink" title="8.基本包装类型也有属性和方法 为啥?"></a>8.基本包装类型也有属性和方法 为啥?</h2><p>为什么字符串可以使用length 为什么有属性? 不是简单数据类型吗?</p><p>因为JS底层把基本数据类型包装成了复杂数据类型</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> num1 = <span class="string">&#x27;你好&#x27;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(num1.<span class="property">length</span>)</span><br><span class="line"><span class="keyword">let</span> num2 = <span class="number">10</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(num2.<span class="title function_">toFixed</span>(<span class="number">2</span>)) 		<span class="comment">// 保留几位小数</span></span><br><span class="line"><span class="comment">// JS底层做了包装 把简单数据类型包装成引入用数据类型</span></span><br><span class="line"><span class="keyword">let</span> num3 = <span class="keyword">new</span> <span class="title class_">String</span>(<span class="string">&#x27;你好啊&#x27;</span>)  <span class="comment">// 实例化对象</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(num3.<span class="property">length</span>)</span><br></pre></td></tr></table></figure><h2 id="9-内置构造函数方法"><a href="#9-内置构造函数方法" class="headerlink" title="9.内置构造函数方法"></a>9.内置构造函数方法</h2><ol><li>keys(获取所有属性名)</li><li>values(获取所有属性值)</li><li>assign(对象的拷贝)</li><li>reduce(reduce累计器 返回累计处理的结果)</li></ol><h2 id="10-数组常见方法"><a href="#10-数组常见方法" class="headerlink" title="10.数组常见方法"></a>10.数组常见方法</h2><ol><li>join(‘&#x2F;‘) 把数组根据分隔符转换为字符串</li><li>find(查找对象符合条件的数据返回其对象)</li><li>every(每个是否符合条件 都符合返回true 不符合返回false)</li><li>some(只要有一个符合 就返回true)</li><li>静态方法from() 伪数组转换真数组</li></ol><h2 id="11-字符串常见方法"><a href="#11-字符串常见方法" class="headerlink" title="11.字符串常见方法"></a>11.字符串常见方法</h2><ol><li><p>split(,) 把字符串转换为数组 和join()相反</p></li><li><p>字符串的截取: n2.substring(开始, 的索引号 不包含想要截取的部分)</p></li><li><p>startsWith判断是否以某个字符开头, 返回布尔值</p></li><li><p>includes 判断字符串是否包含在字符串里, 返回布尔值</p></li><li><p>Number数字 保留小数方法: toFixed(), 不写会四舍五入, 写则保留小数</p></li><li><p>数字转换为字符串方法: String(1)、1.toString()</p></li></ol><h2 id="12-原型对象prototype"><a href="#12-原型对象prototype" class="headerlink" title="12. 原型对象prototype"></a>12. 原型对象prototype</h2><ol><li>公共的方法写在原型对象里</li><li>原型是一个对象 把不变的方法定义在prototype对象上</li><li>可挂载函数 实例化不会多次创建原型的函数 节约内存</li><li>构造函数的this指向实例化对象</li><li>原型对象的this也指向实例化的对象</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params">a, b</span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">a</span> = a</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">b</span> = b</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">c</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;你好&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125; </span><br><span class="line"><span class="keyword">let</span> n1 = <span class="keyword">new</span> <span class="title function_">fn</span>(<span class="string">&#x27;小城&#x27;</span>, <span class="number">10</span>)</span><br><span class="line"><span class="keyword">let</span> n2 = <span class="keyword">new</span> <span class="title function_">fn</span>(<span class="string">&#x27;小东&#x27;</span>, <span class="number">20</span>)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(n1 == n2) <span class="comment">// false</span></span><br><span class="line"><span class="comment">// 会导致内存浪费问题</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(n1.<span class="property">c</span> == n2.<span class="property">c</span>) <span class="comment">// false</span></span><br><span class="line"></span><br><span class="line">fn.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">d</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;你好啊&#x27;</span>)</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(fn.<span class="property"><span class="keyword">prototype</span></span>)</span><br><span class="line">n1.<span class="title function_">d</span>() <span class="comment">// 调用fn方法的原型</span></span><br><span class="line">n2.<span class="title function_">d</span>()</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(n1.<span class="property">d</span> == n2.<span class="property">d</span>) <span class="comment">// true说明函数共享</span></span><br></pre></td></tr></table></figure><h2 id="13-constructor属性"><a href="#13-constructor属性" class="headerlink" title="13.constructor属性"></a>13.constructor属性</h2><ul><li>构造函数prototype指向constructor, 然后constructor再指向回来</li></ul><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(fn.<span class="property"><span class="keyword">prototype</span></span>)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(fn.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">constructor</span> == fn) <span class="comment">// true</span></span><br></pre></td></tr></table></figure><h3 id="constructor使用场景"><a href="#constructor使用场景" class="headerlink" title="constructor使用场景"></a>constructor使用场景</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">fn.<span class="property"><span class="keyword">prototype</span></span> = &#123;</span><br><span class="line">    <span class="comment">// 在里面创建方法可以 但必须指回构造函数</span></span><br><span class="line">    <span class="attr">constructor</span>: fn,</span><br><span class="line">    <span class="attr">n1</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;你好&#x27;</span>)</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">n2</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;你好1&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 指向了prototype里的对象</span></span><br><span class="line"><span class="comment">// 重新指回构造函数后 即指向constructor 也添加了方法</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(fn.<span class="property"><span class="keyword">prototype</span></span>)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(fn.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">constructor</span>) <span class="comment">// 指向fn</span></span><br></pre></td></tr></table></figure><h2 id="14-对象原型-proto"><a href="#14-对象原型-proto" class="headerlink" title="14.对象原型_proto__"></a>14.对象原型_proto__</h2><ol><li>对象都有proto属性 指向原型对象的prototype</li><li>之所以对象可使用原型的方法 是因为有__proto__原型的存在</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params"></span>) &#123;&#125;</span><br><span class="line"><span class="keyword">let</span> n1 = <span class="keyword">new</span> <span class="title function_">fn</span>()</span><br><span class="line"><span class="comment">// prototype就是__proto 是JS非标准属性 只可读</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(n1)</span><br><span class="line"><span class="comment">// 对象原型指向 原型对象 true</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(n1.<span class="property">__proto__</span> == fn.<span class="property"><span class="keyword">prototype</span></span>)</span><br><span class="line"><span class="comment">// 对象原型的constructor 指向构造函数 true</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(n1.<span class="property">__proto__</span>.<span class="property">constructor</span> == fn)</span><br></pre></td></tr></table></figure><h2 id="15-原型继承"><a href="#15-原型继承" class="headerlink" title="15.原型继承"></a>15.原型继承</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fn1</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> n1 = <span class="keyword">new</span> <span class="title function_">fn1</span>()</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(n1)</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn2</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> n2 = <span class="keyword">new</span> <span class="title function_">fn2</span>()</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(n2)</span><br><span class="line"></span><br><span class="line"><span class="comment">// n1和n2都要继承a和b</span></span><br><span class="line"><span class="keyword">let</span> fn3 = &#123;</span><br><span class="line">    <span class="attr">a</span>: <span class="number">1</span>,</span><br><span class="line">    <span class="attr">b</span>: <span class="number">2</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 通过原型来继承 fn</span></span><br><span class="line">n1.<span class="property"><span class="keyword">prototype</span></span> = fn3 <span class="comment">// 通过构造函数解决: 原型继承</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(n1)</span><br><span class="line"><span class="comment">// 覆盖了没有constructor</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(n1.<span class="property"><span class="keyword">prototype</span></span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 指回原来的构造函数</span></span><br><span class="line">n1.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">constructor</span> = fn1</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(n1.<span class="property"><span class="keyword">prototype</span></span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 给n1添加一个方法</span></span><br><span class="line">n1.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">say</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;你好啊&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(n1)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 但是n2也继承了n1的方法 为什么?</span></span><br><span class="line"><span class="comment">// 它们都用了同一对象 根据引用类型特点 就指向同一对象 修改也会影响</span></span><br><span class="line">n2.<span class="property"><span class="keyword">prototype</span></span> = fn3</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(n2)</span><br><span class="line"></span><br><span class="line"><span class="comment">// let fn4 = &#123;</span></span><br><span class="line"><span class="comment">//     a: 1,</span></span><br><span class="line"><span class="comment">//     b: 2</span></span><br><span class="line"><span class="comment">// &#125; 重新在写一个方法 就不会继承 但很麻烦也失去了本质</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 用构造函数解决 new的对象结构一样 对象不一样</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fns</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">a</span> = <span class="number">1</span></span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">b</span> = <span class="number">2</span></span><br><span class="line">&#125;</span><br><span class="line">n1.<span class="property"><span class="keyword">prototype</span></span> = <span class="keyword">new</span> <span class="title function_">fns</span>()</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(n1)</span><br><span class="line"></span><br><span class="line">n2.<span class="property"><span class="keyword">prototype</span></span> = <span class="keyword">new</span> <span class="title function_">fns</span>()</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(n2)</span><br><span class="line"></span><br><span class="line">n1.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">constructor</span> = fn1</span><br><span class="line">n2.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">constructor</span> = fn2</span><br></pre></td></tr></table></figure><h2 id="16-原型链与instanceof运算符"><a href="#16-原型链与instanceof运算符" class="headerlink" title="16.原型链与instanceof运算符"></a>16.原型链与instanceof运算符</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1. 原型链</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> n1 = <span class="keyword">new</span> <span class="title function_">fn</span>()</span><br><span class="line"><span class="comment">// new的实例化对象等于fn.prototype</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(n1.<span class="property">__proto__</span> == fn.<span class="property"><span class="keyword">prototype</span></span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 因为Object也是构造函数 那么就有prototype和constructor</span></span><br><span class="line"><span class="comment">// fn.protptype里的__proto__就等于 Object.constructor</span></span><br><span class="line"><span class="comment">// Object.constructor 在指回Obj 所以__proto__指向Object</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(fn.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">__proto__</span> == <span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// Object的对象有prototype 那么protytype就一定有__proto__</span></span><br><span class="line"><span class="comment">// Object对象最大 所以指向null</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">__proto__</span>) <span class="comment">// null</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 对象原型__proto__的意义是为对象成员查找机制提供一条路线</span></span><br><span class="line"><span class="comment">// 1. 原型链是一个查找规则</span></span><br><span class="line"><span class="comment">// 2. 可查找一些属性和方法 沿着一条路走</span></span><br><span class="line"><span class="comment">// 3. 先看当前原型对象上面有没有</span></span><br><span class="line"><span class="comment">// 4.如果没有再往上一层的原型对象查找</span></span><br><span class="line"><span class="comment">// 5. 如果有 就可使用</span></span><br><span class="line"><span class="comment">// 6. 往上查找最终找到Object为止(null)</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. instanceof运算符用于检测构造函数prototype属性</span></span><br><span class="line"><span class="comment">// 是否出现在某个实例对象的原型对象上</span></span><br><span class="line"><span class="comment">// n1 属于 fn</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(n1 <span class="keyword">instanceof</span> fn) <span class="comment">// true</span></span><br><span class="line"><span class="comment">// n1 属于 Object</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(n1 <span class="keyword">instanceof</span> <span class="title class_">Object</span>) <span class="comment">// true</span></span><br><span class="line"><span class="comment">// n1 不属于 Array</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(n1 <span class="keyword">instanceof</span> <span class="title class_">Array</span>) <span class="comment">// false</span></span><br><span class="line"><span class="comment">// 数组 属于 Array</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>] <span class="keyword">instanceof</span> <span class="title class_">Array</span>) <span class="comment">// true</span></span><br><span class="line"><span class="comment">// 数组 属于 Object</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Array</span> <span class="keyword">instanceof</span> <span class="title class_">Object</span>) <span class="comment">// true</span></span><br></pre></td></tr></table></figure><h2 id="17-浅拷贝"><a href="#17-浅拷贝" class="headerlink" title="17.浅拷贝"></a>17.浅拷贝</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1. 直接复制对象问题 </span></span><br><span class="line"><span class="comment">// 只要是对象都会互相影响 拷贝的是对象栈里的地址</span></span><br><span class="line"><span class="keyword">let</span> n1 = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;小城&#x27;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">18</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> n2 = n1</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(n2)</span><br><span class="line">n2.<span class="property">age</span> = <span class="number">20</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(n2)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(n1) <span class="comment">// n1的对象改变了</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. 浅拷贝 复制对象可以解决</span></span><br><span class="line"><span class="comment">// 展开运算符</span></span><br><span class="line"><span class="keyword">let</span> n3 = &#123;...n1&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(n3) <span class="comment">// 拷贝n1对象</span></span><br><span class="line">n3.<span class="property">age</span> = <span class="number">21</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(n3) <span class="comment">// 21</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(n1) <span class="comment">// 这样不会影响 20</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 对象assign方法</span></span><br><span class="line"><span class="keyword">let</span> n4 = &#123;&#125;</span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">assign</span>(n4, n1)</span><br><span class="line">n4.<span class="property">age</span> = <span class="number">100</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(n4)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(n1)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 但有问题 浅拷贝只针对单层对象不影响 多重对象就有问题</span></span><br><span class="line"><span class="comment">// 如果属性值是引用数据类型 则浅拷贝的是地址</span></span><br><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;小东&#x27;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">10</span>,</span><br><span class="line">    <span class="attr">sex</span>: &#123;</span><br><span class="line">        <span class="attr">num</span>: <span class="number">1</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> n5 = &#123;&#125;</span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">assign</span>(n5, obj)</span><br><span class="line">n5.<span class="property">age</span> = <span class="number">100</span></span><br><span class="line">n5.<span class="property">sex</span>.<span class="property">num</span> = <span class="number">2</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(n5)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj)</span><br></pre></td></tr></table></figure><h2 id="18-深拷贝"><a href="#18-深拷贝" class="headerlink" title="18.深拷贝"></a>18.深拷贝</h2><h3 id="1-浅拷贝和深拷贝只针对引用类型"><a href="#1-浅拷贝和深拷贝只针对引用类型" class="headerlink" title="1.浅拷贝和深拷贝只针对引用类型"></a>1.浅拷贝和深拷贝只针对引用类型</h3><ul><li>深拷贝: 拷贝的是对象 不是地址, 通过递归实现深拷贝</li></ul><h3 id="2-深拷贝如何实现的"><a href="#2-深拷贝如何实现的" class="headerlink" title="2.深拷贝如何实现的?"></a>2.深拷贝如何实现的?</h3><ol><li>深拷贝拷贝的新对象不会影响旧对象 实现深拷贝用递归函数</li><li>当普通对象拷贝没问题 但遇到有数组的再次调用递归函数就ok</li><li>当用的是对象形式 再次利用递归函数解决</li><li>if判断 先Array在Object</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 浅拷贝和深拷贝只针对引用类型</span></span><br><span class="line"><span class="comment">// 深拷贝: 拷贝的是对象 不是地址</span></span><br><span class="line"><span class="comment">// 1. 通过递归实现深拷贝</span></span><br><span class="line"><span class="comment">// 1. 简版递归 浅拷贝函数 实现深拷贝</span></span><br><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">a</span>: <span class="number">1</span>,</span><br><span class="line">    <span class="attr">b</span>: <span class="number">2</span>,</span><br><span class="line">    <span class="attr">c</span>: [<span class="string">&#x27;苹果1&#x27;</span>, <span class="string">&#x27;苹果2&#x27;</span>],</span><br><span class="line">    <span class="attr">d</span>: &#123;</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&#x27;小&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> n1 = &#123;&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">f</span>(<span class="params">x, y</span>) &#123;</span><br><span class="line">    <span class="comment">// k 属性名 obj[k]属性值</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> k <span class="keyword">in</span> y) &#123;</span><br><span class="line"></span><br><span class="line">        <span class="comment">// 解决数组问题</span></span><br><span class="line">        <span class="comment">// 注意: if一定要先写数组 再写对象</span></span><br><span class="line">        <span class="keyword">if</span> (y[k] <span class="keyword">instanceof</span> <span class="title class_">Array</span>) &#123;</span><br><span class="line">            <span class="comment">// x[k] 接收 [] c</span></span><br><span class="line">            <span class="comment">// y[k] [&#x27;苹果1&#x27;,&#x27;苹果2&#x27;]</span></span><br><span class="line">            x[k] = []</span><br><span class="line">            <span class="title function_">f</span>(x[k], y[k])</span><br><span class="line"></span><br><span class="line">        &#125; <span class="keyword">else</span> <span class="keyword">if</span> (y[k] <span class="keyword">instanceof</span> <span class="title class_">Object</span>) &#123;</span><br><span class="line">            x[k] = &#123;&#125;</span><br><span class="line">            <span class="title function_">f</span>(x[k], y[k])</span><br><span class="line"></span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">           x[k] = y[k]</span><br><span class="line">        &#125;</span><br><span class="line">    <span class="comment">// x[k] = n1.a 给新对象添加属性 </span></span><br><span class="line">    <span class="comment">// 把代码放入if判断里 如果不是Array 则执行以下代码</span></span><br><span class="line">    <span class="comment">// x[k] = y[k]</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">f</span>(n1, obj) <span class="comment">// 调用函数 n1新对象 obj旧对象</span></span><br><span class="line">n1.<span class="property">a</span> = <span class="number">10</span></span><br><span class="line"><span class="comment">// 但如果函数有数组类型就有问题</span></span><br><span class="line">n1.<span class="property">c</span>[<span class="number">0</span>] = <span class="string">&#x27;香蕉&#x27;</span></span><br><span class="line"><span class="comment">// 也可以处理对象类型</span></span><br><span class="line">n1.<span class="property">d</span>.<span class="property">name</span> = <span class="string">&#x27;大&#x27;</span></span><br><span class="line"><span class="comment">// 注意: if一定要先写数组 再写对象</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>([<span class="number">1</span>,<span class="number">2</span>] <span class="keyword">instanceof</span> <span class="title class_">Object</span>)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(n1)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. lodash库cloneDeep内部实现深拷贝</span></span><br><span class="line"><span class="keyword">let</span> n2 = _.<span class="title function_">cloneDeep</span>(obj)</span><br><span class="line">n2.<span class="property">d</span>.<span class="property">name</span> = <span class="string">&#x27;大&#x27;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(n2)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 3. JSON实现深拷贝</span></span><br><span class="line"><span class="comment">// 把对象转换为JSON字符串</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj))</span><br><span class="line"><span class="comment">// 先转换为字符串 然后parse生成新对象 新对象和旧对象没有关系</span></span><br><span class="line"><span class="keyword">let</span> n3 = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj))</span><br><span class="line">n3.<span class="property">d</span>.<span class="property">name</span> = <span class="string">&#x27;大&#x27;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(n3)</span><br></pre></td></tr></table></figure><h2 id="19-this指向的三种方法"><a href="#19-this指向的三种方法" class="headerlink" title="19.this指向的三种方法"></a>19.this指向的三种方法</h2><h3 id="1-call和apply的区别"><a href="#1-call和apply的区别" class="headerlink" title="1.call和apply的区别"></a>1.call和apply的区别</h3><ol><li><p>都能调用函数</p></li><li><p>都能改变this指向</p></li><li><p>参数不一样 apply传递必须数组</p></li><li><p><strong>严格模式下指向undefined</strong></p></li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1. 改变this 函数中允许this指向有三个方法</span></span><br><span class="line"><span class="comment">// 1. call() 调用函数 同时指定被调函数的this值</span></span><br><span class="line"><span class="keyword">let</span> n1 = &#123;<span class="attr">name</span>: <span class="string">&#x27;小城&#x27;</span>&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params">x, y</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>)</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(x + y)</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 1. 调用函数 2. 改变this指向</span></span><br><span class="line">fn.<span class="title function_">call</span>(n1, <span class="number">1</span>, <span class="number">2</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. apply() 调用函数 同时指定被调函数的this值</span></span><br><span class="line"><span class="comment">// 1. 调用函数 </span></span><br><span class="line"><span class="comment">// 2. 改变this指向</span></span><br><span class="line"><span class="comment">// 3. 传递的值必须包含数组里</span></span><br><span class="line"><span class="comment">// 4. 本身就是调用函数 所以返回值就是函数返回值</span></span><br><span class="line"><span class="comment">// fn2.apply(this指向谁, 数组参数)</span></span><br><span class="line">fn.<span class="title function_">apply</span>(n1, [<span class="number">10</span>, <span class="number">20</span>])</span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用场景: 求数组大小值</span></span><br><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]</span><br><span class="line"><span class="keyword">let</span> max = <span class="title class_">Math</span>.<span class="property">max</span>.<span class="title function_">apply</span>(<span class="title class_">Math</span>, arr)</span><br><span class="line"><span class="keyword">let</span> min = <span class="title class_">Math</span>.<span class="property">min</span>.<span class="title function_">apply</span>(<span class="title class_">Math</span>, arr)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(max, min)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 4. this指向</span></span><br><span class="line"><span class="comment">// 1. 普通this指向 谁调用我 this指向谁</span></span><br><span class="line"><span class="comment">// 严格模式下指向undefined</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>) <span class="comment">// window</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn1</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>) <span class="comment">// window</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">fn1</span>()</span><br><span class="line"></span><br><span class="line"><span class="variable language_">window</span>.<span class="built_in">setTimeout</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>) <span class="comment">// window</span></span><br><span class="line">&#125;, <span class="number">100</span>)</span><br><span class="line"></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;button&#x27;</span>).<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>) <span class="comment">// button</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    <span class="attr">a</span>: <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>) <span class="comment">// obj</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">obj.<span class="title function_">a</span>()</span><br><span class="line"></span><br><span class="line"><span class="comment">// 5. 箭头函数this指向 沿用上一层this指向</span></span><br><span class="line"><span class="comment">// 向外层作用域查找this 直到有this指向为止</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;button&#x27;</span>).<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>) <span class="comment">// window</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn2</span>(<span class="params"></span>) &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line">fn2.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">say</span> = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>) <span class="comment">// window</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> n2 = <span class="keyword">new</span> <span class="title function_">fn2</span>()</span><br><span class="line">n2.<span class="title function_">say</span>()</span><br></pre></td></tr></table></figure><h3 id="2-this-bind方法"><a href="#2-this-bind方法" class="headerlink" title="2. this.bind方法"></a>2. this.bind方法</h3><ol><li>call、apply、bind的区别: 相同点: 都可改变this指向</li><li>call和apply会调用函数 可修改this</li><li>bind不会调用函数 可修改this</li><li>call和apply传递参数不一样 call是(1,2) apply是数组形式</li></ol><h3 id="3-应用场景"><a href="#3-应用场景" class="headerlink" title="3.应用场景:"></a>3.应用场景:</h3><ol><li>call 想要调用函数 还要传递参数</li><li>apply 想要调用函数 并且要改变this 还想传递数组</li><li>bind 不想调用函数 只想改变this 比如改变定时器的this</li><li>普通参数用call 数组用apply 改变this不想调用用bind</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1. bind方法改变this</span></span><br><span class="line"><span class="keyword">let</span> obj = &#123;<span class="attr">name</span>: <span class="string">&#x27;小城&#x27;</span>&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 1. bind 不会调用函数</span></span><br><span class="line"><span class="comment">// 2. 能改变this指向</span></span><br><span class="line"><span class="comment">// 3. 返回值是个函数 但函数里的this是更改过的obj</span></span><br><span class="line">fn.<span class="title function_">bind</span>()</span><br><span class="line"><span class="keyword">let</span> n1 = fn.<span class="title function_">bind</span>(obj)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(n1) <span class="comment">// 返回fn函数</span></span><br><span class="line"><span class="title function_">n1</span>() <span class="comment">// 但this指向obj</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. 有一个按钮 点击就禁用 2秒后开启</span></span><br><span class="line"><span class="keyword">let</span> btn = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;button&#x27;</span>)</span><br><span class="line">btn.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">disabled</span> = <span class="literal">true</span></span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line"><span class="comment">// 在普通函数里 将原来的window.this指向btn</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">disabled</span> = <span class="literal">false</span></span><br><span class="line">    &#125;.<span class="title function_">bind</span>(<span class="variable language_">this</span>), <span class="number">300</span>)</span><br><span class="line"><span class="comment">// bind(this)在延迟函数外层写的 所以外层指向btn </span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h2 id="20-防抖以及底层实现"><a href="#20-防抖以及底层实现" class="headerlink" title="20.防抖以及底层实现"></a>20.防抖以及底层实现</h2><ol><li>在点击事件内的时间 频繁触发事件 只执行一次</li><li>比如王者的回城 被打断就会重来</li><li>使用场景: 搜索框输入联想词、手机号邮箱验证 可减少服务器请求</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 2. 鼠标在盒子上移动 数字就会加1 使用防抖实现性能优化</span></span><br><span class="line"><span class="keyword">let</span> box = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.box&#x27;</span>)</span><br><span class="line"><span class="keyword">let</span> num = <span class="number">1</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params"></span>) &#123;</span><br><span class="line"><span class="comment">// 如果有很多DOM操作 大量数据处理 可能会卡</span></span><br><span class="line">    box.<span class="property">innerHTML</span> = num++</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// box.addEventListener(&#x27;mousemove&#x27;, fn)</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 3. 利用lodash库实现防抖 500ms之后加1</span></span><br><span class="line"><span class="comment">// _.debounce(函数, 时间)</span></span><br><span class="line"><span class="comment">// box.addEventListener(&#x27;mousemove&#x27;, _.debounce(fn, 100))</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 4. 手写防抖函数 核心是利用setTimeout定时器实现</span></span><br><span class="line"><span class="comment">// 1. 声明定时器变量</span></span><br><span class="line"><span class="comment">// 2. 每次鼠标事件 先判断是否有定时器 有就清除以前的定时器</span></span><br><span class="line"><span class="comment">// 3. 没有则开启定时器 存到定时器变量里</span></span><br><span class="line"><span class="comment">// 4. 定时器里写函数调用</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn1</span>(<span class="params">fn, time</span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> t = <span class="number">0</span></span><br><span class="line">    <span class="comment">// return 返回一个匿名函数</span></span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="comment">// 判断是否有定时器 有就清除</span></span><br><span class="line">        <span class="keyword">if</span> (t) <span class="built_in">clearTimeout</span>(t)</span><br><span class="line">        <span class="comment">// 没有定时器则开启定时器 再调用fn() </span></span><br><span class="line">        t = <span class="built_in">setTimeout</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">            <span class="title function_">fn</span>()</span><br><span class="line">        &#125;, time)</span><br><span class="line">    &#125;   </span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 函数一调用 就会返回一个值</span></span><br><span class="line"><span class="comment">// fn1(fn, 500) = return function()</span></span><br><span class="line">box.<span class="title function_">addEventListener</span>(<span class="string">&#x27;mousemove&#x27;</span>, <span class="title function_">fn1</span>(fn, <span class="number">500</span>))</span><br></pre></td></tr></table></figure><h2 id="21-节流以及底层实现"><a href="#21-节流以及底层实现" class="headerlink" title="21.节流以及底层实现"></a>21.节流以及底层实现</h2><ol><li>在3秒内频繁触发事件只执行一次</li><li>比如王者的技能冷却期间是无法释放的</li><li>使用场景: 鼠标mousemove、页面尺寸缩放resize、滚动条scroll滚动…</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> box = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;.box&#x27;</span>)</span><br><span class="line"><span class="keyword">let</span> num = <span class="number">1</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params"></span>) &#123;</span><br><span class="line">    box.<span class="property">innerHTML</span> = num++</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// box.addEventListener(&#x27;mousemove&#x27;, fn)</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. 利用lodsah库实现 节流 500ms内只执行一次</span></span><br><span class="line"><span class="comment">// _.throttle(函数, 时间)</span></span><br><span class="line"><span class="comment">// box.addEventListener(&#x27;mousemove&#x27;, _.throttle(fn, 1000))</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 3. 手写节流函数 核心是利用setTimeout定时器实现</span></span><br><span class="line"><span class="comment">// 1. 声明一个变量</span></span><br><span class="line"><span class="comment">// 2. 每次鼠标事件 先判断是否有定时器 有则不开启定时器</span></span><br><span class="line"><span class="comment">// 3. 没有则开启定时器 存入变量里</span></span><br><span class="line"><span class="comment">// 4. 定时器里调用fn()函数</span></span><br><span class="line"><span class="comment">// 5. 定时器里把定时器清空 null 为下次在开启定时器</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn1</span>(<span class="params">fn, time</span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> t = <span class="number">0</span></span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">if</span> (!t) &#123;</span><br><span class="line">            t = <span class="built_in">setTimeout</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">                <span class="title function_">fn</span>()</span><br><span class="line"><span class="comment">// 设置为null 覆盖定时器 就可以开启下次定时器了</span></span><br><span class="line">                t = <span class="literal">null</span></span><br><span class="line">            &#125;, time)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">box.<span class="title function_">addEventListener</span>(<span class="string">&#x27;mousemove&#x27;</span>, <span class="title function_">fn1</span>(fn, <span class="number">200</span>))</span><br><span class="line"></span><br><span class="line"><span class="comment">// 4. 清除定时器问题</span></span><br><span class="line"><span class="comment">// 在setTimeout里是无法删除定时器的 因为定时器还在运作</span></span><br><span class="line"><span class="comment">// 所以使用 t = null 而不是clearTimeout(t)</span></span><br><span class="line"><span class="keyword">let</span> n1 = <span class="literal">null</span></span><br><span class="line">n1 = <span class="built_in">setTimeout</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="built_in">clearTimeout</span>(n1)</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(n1) <span class="comment">// 打印为1</span></span><br><span class="line">&#125;, <span class="number">200</span>)</span><br></pre></td></tr></table></figure><h2 id="22-Ajax接口请求过程"><a href="#22-Ajax接口请求过程" class="headerlink" title="22.Ajax接口请求过程"></a>22.Ajax接口请求过程</h2><ol><li>用户向服务器提交数据</li><li>通过Ajax载体发起get请求</li><li>服务器处理Ajax请求 然后响应get请求</li><li>在通过Ajax处理返回给用户</li><li>什么是Ajax? 网页中利用XMLHttpRequest对象和服务器的数据交互方式</li><li>通信协议 服务器名称 具体存放位置 http:&#x2F;&#x2F; baidu.com &#x2F;index.html</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1. $.post() 请求函数语法 向服务器提交数据</span></span><br><span class="line"><span class="comment">// $.post(&#x27;提交数据的地址&#x27;, &#x27;要提交的数据&#x27;, &#x27;数据提交成功的回调函数&#x27;)</span></span><br><span class="line">$(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    $(<span class="string">&#x27;.btn2&#x27;</span>).<span class="title function_">click</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        $.<span class="title function_">post</span>(<span class="string">&#x27;http://ajax-api.itheima.net/api/books&#x27;</span>, </span><br><span class="line">        &#123;<span class="attr">bookname</span>: <span class="string">&#x27;水浒传&#x27;</span>, <span class="attr">author</span>: <span class="string">&#x27;出版社&#x27;</span>, <span class="attr">publisher</span>: <span class="string">&#x27;施耐庵&#x27;</span>&#125;, </span><br><span class="line">        <span class="keyword">function</span> (<span class="params">res</span>) &#123;</span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(res) <span class="comment">// 数据提交成功返回的函数</span></span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. $.ajax() 请求函数语法 是一个功能综合的函数 可get/post请求</span></span><br><span class="line">$(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    $(<span class="string">&#x27;.btn4&#x27;</span>).<span class="title function_">click</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        $.<span class="title function_">ajax</span>(&#123;</span><br><span class="line">            <span class="attr">type</span>: <span class="string">&#x27;POST&#x27;</span>,</span><br><span class="line">            <span class="attr">url</span>: <span class="string">&#x27;http://ajax-api.itheima.net/api/books&#x27;</span>,</span><br><span class="line">            <span class="attr">data</span>: &#123;</span><br><span class="line">                <span class="attr">bookname</span>: <span class="string">&#x27;西游记&#x27;</span>,</span><br><span class="line">                <span class="attr">author</span>: <span class="string">&#x27;人民出版社&#x27;</span>,</span><br><span class="line">                <span class="attr">publisher</span>: <span class="string">&#x27;孙悟空&#x27;</span></span><br><span class="line">            &#125;,</span><br><span class="line">            <span class="attr">success</span>: <span class="keyword">function</span> (<span class="params">res</span>) &#123;</span><br><span class="line">                <span class="variable language_">console</span>.<span class="title function_">log</span>(res)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><h2 id="23-HTTP状态码"><a href="#23-HTTP状态码" class="headerlink" title="23.HTTP状态码"></a>23.HTTP状态码</h2><ol><li>200 成功 只要有2 就是成功</li><li>302 重定向 直接修改网址 把a网址改为b网址</li></ol><ul><li>只要有4 前端问题</li></ul><ol><li>400 参数错误</li><li>401 未登录&#x2F;未认证 没登录但输入了后台页</li><li>403 无权限 跟视频会员一样</li><li>404 请求行错误 url错误&#x2F;请求method错误</li><li>413 文件上传限制 文件过大</li></ol><ul><li>只要有5 服务器内部问题</li></ul><h2 id="24-restful接口规范"><a href="#24-restful接口规范" class="headerlink" title="24.restful接口规范"></a>24.restful接口规范</h2><ol><li>这三个一定是post请求体传参: post 新增数据、put 全局更新数据、patch 局部更新数据</li><li>delete 删除数据 请求体get&#x2F;post都可以传参</li></ol><h3 id="Get和Post请求区别"><a href="#Get和Post请求区别" class="headerlink" title="Get和Post请求区别:"></a>Get和Post请求区别:</h3><h4 id="1-传参方式不一样"><a href="#1-传参方式不一样" class="headerlink" title="1.传参方式不一样"></a>1.传参方式不一样</h4><ol><li>get在请求行传参</li><li>post在请求体载荷传参 参数会进行切片处理 切多少取决于数据和带宽</li><li>204预检请求: 遇到请求体一次发不完 先通知服务器接收</li><li>在内存里准备空间 然后建立数据流传参</li></ol><h4 id="2-传参速度-get更快-直接url查找"><a href="#2-传参速度-get更快-直接url查找" class="headerlink" title="2.传参速度 get更快 直接url查找"></a>2.传参速度 get更快 直接url查找</h4><h4 id="3-传参数据大小不一样"><a href="#3-传参数据大小不一样" class="headerlink" title="3.传参数据大小不一样"></a>3.传参数据大小不一样</h4><ol><li>get有大小限制 2~4kb</li><li>post无上限</li></ol><h4 id="4-安全性-post更高"><a href="#4-安全性-post更高" class="headerlink" title="4.安全性 post更高"></a>4.安全性 post更高</h4><h2 id="25-Ajax的XMLHttpRequest原理"><a href="#25-Ajax的XMLHttpRequest原理" class="headerlink" title="25.Ajax的XMLHttpRequest原理"></a>25.Ajax的XMLHttpRequest原理</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 01. 使用XMLHttpRequest对象与服务器通信</span></span><br><span class="line"><span class="comment">// 1. 创建xhr对象</span></span><br><span class="line"><span class="keyword">let</span> xhr = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>()</span><br><span class="line"><span class="comment">// 2. 设置请求方法和url地址</span></span><br><span class="line">xhr.<span class="title function_">open</span>(<span class="string">&#x27;get&#x27;</span>, <span class="string">&#x27;http://hmajax.itheima.net/api/news&#x27;</span>)</span><br><span class="line"><span class="comment">// 3. 发送ajax请求</span></span><br><span class="line">xhr.<span class="title function_">send</span>()</span><br><span class="line"><span class="comment">// 4. 注册响应事件 loadend主流 load兼容性好 </span></span><br><span class="line"><span class="comment">// 响应需要时间 不是秒拿 时间取决于带宽/网络</span></span><br><span class="line">xhr.<span class="title function_">addEventListener</span>(<span class="string">&#x27;loadend&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line"><span class="comment">// 5. 响应数据</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(xhr.<span class="property">response</span>)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 02. XMLHttpRequest发送get参数</span></span><br><span class="line"><span class="comment">// 2.1 使用xhr携带查询参数的ajax请求 url?参数名=参数值</span></span><br><span class="line"><span class="keyword">let</span> xhr1 = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>()</span><br><span class="line"><span class="comment">// 2.2 xhr的url只能进行拼接 因为它是最底层的原理</span></span><br><span class="line">xhr1.<span class="title function_">open</span>(<span class="string">&#x27;get&#x27;</span>, <span class="string">&#x27;http://hmajax.itheima.net/api/city?pname=湖北省&#x27;</span>)</span><br><span class="line">xhr1.<span class="title function_">send</span>()</span><br><span class="line">xhr1.<span class="title function_">addEventListener</span>(<span class="string">&#x27;loadend&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(xhr1.<span class="property">response</span>)</span><br><span class="line"><span class="comment">// 2.3 服务器响应的数据一定是json格式 json -&gt; js</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">parse</span>(xhr1.<span class="property">response</span>))</span><br><span class="line"><span class="comment">// 2.4 axios额外对象是axios额外包装的 </span></span><br><span class="line"><span class="comment">// config请求报文 headers请求头</span></span><br><span class="line"><span class="comment">// request告诉你用的xhr对象 status成功/失败</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 03. XMLHttpRequest发送post参数</span></span><br><span class="line"><span class="keyword">let</span> xhr2 = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>()</span><br><span class="line">xhr2.<span class="title function_">open</span>(<span class="string">&#x27;post&#x27;</span>, <span class="string">&#x27;http://hmajax.itheima.net/api/register&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 3.2 post需要设置原生请求头</span></span><br><span class="line">xhr2.<span class="title function_">setRequestHeader</span>(<span class="string">&#x27;Content-Type&#x27;</span>, <span class="string">&#x27;application/json; charset=utf-8&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 3.1 post发送请求体 因为是最原生写法</span></span><br><span class="line"><span class="comment">// 3.3 请求头是json 但请求体是查询字符串 所以要写json格式字符串</span></span><br><span class="line"><span class="comment">// xhr2.send(&#x27;username=admin123&amp;password=123456&#x27;)</span></span><br><span class="line">xhr2.<span class="title function_">send</span>(<span class="string">&#x27;&#123;&quot;username&quot;: &quot;admin123&quot;, &quot;password&quot;: &quot;123456&quot;&#125;&#x27;</span>)</span><br><span class="line"></span><br><span class="line">xhr2.<span class="title function_">addEventListener</span>(<span class="string">&#x27;loadend&#x27;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(xhr2.<span class="property">response</span>)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 04. 小结</span></span><br><span class="line"><span class="comment">// get参数在请求行 url?参数名=参数值</span></span><br><span class="line"><span class="comment">// post参数在请求体 xhr.send(json格式)</span></span><br><span class="line"><span class="comment">// post请求需额外设置请求头</span></span><br><span class="line"><span class="comment">// setRequestHeader(&#x27;Content-Type&#x27;, &#x27;application/json; charset=utf-8&#x27;)</span></span><br></pre></td></tr></table></figure><h2 id="26-Promise作用"><a href="#26-Promise作用" class="headerlink" title="26.Promise作用"></a>26.Promise作用</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 01. Promise作用: 解决回调地狱</span></span><br><span class="line"><span class="comment">// 回调地狱: 异步回调 层层嵌套</span></span><br><span class="line"><span class="comment">// js代码分为2种: 同步(默认) 异步</span></span><br><span class="line"><span class="comment">// 同步: 按照顺序立即执行</span></span><br><span class="line"><span class="comment">// 异步: 没有顺序 延迟执行 (事件、定时器、ajax)</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 层层嵌套: </span></span><br><span class="line"><span class="comment">// 1.1 一级分类</span></span><br><span class="line"><span class="keyword">let</span> xhr1 = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>()</span><br><span class="line">xhr1.<span class="title function_">open</span>(<span class="string">&#x27;get&#x27;</span>, <span class="string">&#x27;http://123.57.109.30:3999/api/categoryfirst&#x27;</span>)</span><br><span class="line">xhr1.<span class="title function_">send</span>()</span><br><span class="line">xhr1.<span class="property">onload</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;一级&#x27;</span>)</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">parse</span>(xhr1.<span class="property">response</span>))</span><br><span class="line"></span><br><span class="line"><span class="comment">// 1.2 二级分类</span></span><br><span class="line"><span class="keyword">let</span> xhr2 = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>()</span><br><span class="line">xhr2.<span class="title function_">open</span>(<span class="string">&#x27;get&#x27;</span>, <span class="string">&#x27;http://123.57.109.30:3999/api/categorySecond?firstId=621&#x27;</span>)</span><br><span class="line">xhr2.<span class="title function_">send</span>()</span><br><span class="line">xhr2.<span class="property">onload</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;二级&#x27;</span>)</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">parse</span>(xhr2.<span class="property">response</span>))</span><br><span class="line"></span><br><span class="line"><span class="comment">// 1.3 三级分类</span></span><br><span class="line"><span class="keyword">let</span> xhr3 = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>()</span><br><span class="line">xhr3.<span class="title function_">open</span>(<span class="string">&#x27;get&#x27;</span>, <span class="string">&#x27;http://123.57.109.30:3999/api/categoryThird?secondId=622&#x27;</span>)</span><br><span class="line">xhr3.<span class="title function_">send</span>()</span><br><span class="line">xhr3.<span class="property">onload</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;三级&#x27;</span>)</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">parse</span>(xhr3.<span class="property">response</span>))</span><br><span class="line">&#125;</span><br><span class="line">&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 1.4 浏览器刷新打印顺序会不同</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">666</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 02. Promise语法</span></span><br><span class="line"><span class="comment">// 2.1 调用构造函数 创建Promise实例</span></span><br><span class="line"><span class="comment">// (resolve, reject) 是箭头函数的参数</span></span><br><span class="line"><span class="keyword">let</span> pro = <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 异步代码</span></span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="comment">// resolve(1) // 成功 1是实参</span></span><br><span class="line">       <span class="title function_">reject</span>(<span class="number">2</span>) <span class="comment">// 失败</span></span><br><span class="line">    &#125;, <span class="number">500</span>)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2.2 调用Promise实例对象的then/catch方法</span></span><br><span class="line"><span class="comment">// resolve本质就是调用res res是形参 resolve(1)是实参</span></span><br><span class="line"><span class="comment">// resolve和reject状态二选一的</span></span><br><span class="line">pro.<span class="title function_">then</span>(<span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(res)</span><br><span class="line">&#125;).<span class="title function_">catch</span>(<span class="function"><span class="params">error</span> =&gt;</span> &#123;</span><br><span class="line"><span class="comment">// reject失败则调用catch方法</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(error)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2.3 Promise在创建实例时 里面代码会立即执行 </span></span><br><span class="line"><span class="comment">// Promise自己是同步的 只有then方法才是异步的</span></span><br></pre></td></tr></table></figure><h2 id="27-Promise工作原理"><a href="#27-Promise工作原理" class="headerlink" title="27.Promise工作原理"></a>27.Promise工作原理</h2><ol><li>Promise是什么? 是ES6新增的构造函数</li><li>Promise作用: 解决回调地狱</li></ol><h3 id="1-Promise应用场景-x2F-原理-Promise对象有三种状态"><a href="#1-Promise应用场景-x2F-原理-Promise对象有三种状态" class="headerlink" title="1.Promise应用场景&#x2F;原理 Promise对象有三种状态:"></a>1.Promise应用场景&#x2F;原理 Promise对象有三种状态:</h3><ol><li>pending 进行中(默认状态) 所以一旦创建Promise 里面代码会立即执行</li><li>fuifilled 已完成</li><li>rejected 已失败</li><li>Promise相当于是一个容器 把异步代码放入容器中</li></ol><h3 id="2-Promise对象状态只有两种状态"><a href="#2-Promise对象状态只有两种状态" class="headerlink" title="2.Promise对象状态只有两种状态:"></a>2.Promise对象状态只有两种状态:</h3><ol><li>调用resolve()方法时: 从pending变为fuifilled</li><li>调用reject()方法时: 从pending变为rejected</li><li>状态只能改变一次 不管成功&#x2F;失败 都会有一个数据结果</li></ol><h3 id="3-Promise状态发生改变后-在任何时候都可以获取结果"><a href="#3-Promise状态发生改变后-在任何时候都可以获取结果" class="headerlink" title="3.Promise状态发生改变后 在任何时候都可以获取结果"></a>3.Promise状态发生改变后 在任何时候都可以获取结果</h3><ol><li>怎么拿Promise结果呢?</li><li>Promise实例的then方法获取成功结果</li><li>Promise实例的catch方法获取失败结果</li></ol><h3 id="4-Promise在创建实例时-里面代码会立即执行"><a href="#4-Promise在创建实例时-里面代码会立即执行" class="headerlink" title="4.Promise在创建实例时 里面代码会立即执行"></a>4.Promise在创建实例时 里面代码会立即执行</h3><ol><li>Promise自己是同步的 只有then方法才是异步的</li></ol><h2 id="28-Promise使用链式语法解决回调地狱"><a href="#28-Promise使用链式语法解决回调地狱" class="headerlink" title="28.Promise使用链式语法解决回调地狱"></a>28.Promise使用链式语法解决回调地狱</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Promise使用链式语法解决回调地狱</span></span><br><span class="line"><span class="comment">// 01. 创建Promise实例</span></span><br><span class="line"><span class="comment">// let p = new Promise((resolve, reject) =&gt; &#123;</span></span><br><span class="line"><span class="comment">//     // 创建xhr对象</span></span><br><span class="line"><span class="comment">//     let xhr = new XMLHttpRequest()</span></span><br><span class="line"><span class="comment">//     // 设置请求方式和url</span></span><br><span class="line"><span class="comment">//     xhr.open(&#x27;get&#x27;, &#x27;http://123.57.109.30:3999/api/categoryfirst&#x27;)</span></span><br><span class="line"><span class="comment">//     // 发送ajax请求</span></span><br><span class="line"><span class="comment">//     xhr.send()</span></span><br><span class="line"><span class="comment">//     // 注册响应事件函数</span></span><br><span class="line"><span class="comment">//     xhr.onload = function () &#123;</span></span><br><span class="line"><span class="comment">//         console.log(&#x27;一级&#x27;)</span></span><br><span class="line"><span class="comment">//         let res = JSON.parse(xhr.response)</span></span><br><span class="line"><span class="comment">//     // 1.1 Promise成功状态</span></span><br><span class="line"><span class="comment">//         resolve(res)</span></span><br><span class="line"><span class="comment">//     &#125;</span></span><br><span class="line"><span class="comment">// &#125;)</span></span><br><span class="line"><span class="comment">// 1.2 取出Promise实例对象结果</span></span><br><span class="line"><span class="comment">// p.then(res =&gt; &#123;</span></span><br><span class="line"><span class="comment">//     console.log(res)</span></span><br><span class="line"><span class="comment">// &#125;)</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 02. 三个实例对象只有url不一样 可封装成函数 帮我们创建Promise实例对象</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params">url</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">let</span> xhr = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>()</span><br><span class="line">    <span class="comment">// 2.1 url是形参 调用时写入实参</span></span><br><span class="line">    xhr.<span class="title function_">open</span>(<span class="string">&#x27;get&#x27;</span>, url) </span><br><span class="line">    xhr.<span class="title function_">send</span>()</span><br><span class="line">    xhr.<span class="property">onload</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">let</span> res = <span class="title class_">JSON</span>.<span class="title function_">parse</span>(xhr.<span class="property">response</span>)</span><br><span class="line">    <span class="comment">// 2.2 Promise成功状态</span></span><br><span class="line">        <span class="title function_">resolve</span>(res)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 2.3 调用封装好的Promise实例对象函数</span></span><br><span class="line"><span class="keyword">let</span> p1 = <span class="title function_">fn</span>(<span class="string">&#x27;http://123.57.109.30:3999/api/categoryfirst&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> p2 = <span class="title function_">fn</span>(<span class="string">&#x27;http://123.57.109.30:3999/api/categorySecond?firstId=622&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> p3 = <span class="title function_">fn</span>(<span class="string">&#x27;http://123.57.109.30:3999/api/categoryThird?secondId=621&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 3. 取出Promise实例对象的函数结果</span></span><br><span class="line"><span class="comment">// p1.then(res =&gt; &#123;</span></span><br><span class="line"><span class="comment">//     console.log(res)</span></span><br><span class="line"><span class="comment">// &#125;)</span></span><br><span class="line"><span class="comment">// p2.then(res =&gt; &#123;</span></span><br><span class="line"><span class="comment">//     console.log(res)</span></span><br><span class="line"><span class="comment">// &#125;)</span></span><br><span class="line"><span class="comment">// p3.then(res =&gt; &#123;</span></span><br><span class="line"><span class="comment">//     console.log(res)</span></span><br><span class="line"><span class="comment">// &#125;)</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 4. 但打印结果还是随机的 因为只要创建代码就会立即执行</span></span><br><span class="line"><span class="comment">// p1进行完后 return 返回p2的实例对象 .then可换行</span></span><br><span class="line">p1.<span class="title function_">then</span>(<span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(res)</span><br><span class="line">    <span class="keyword">return</span> p2</span><br><span class="line">&#125;)</span><br><span class="line">.<span class="title function_">then</span>(<span class="function"><span class="params">res</span> =&gt;</span> &#123; </span><br><span class="line"><span class="comment">// p2的then</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(res)</span><br><span class="line">    <span class="keyword">return</span> p3</span><br><span class="line">&#125;)</span><br><span class="line">.<span class="title function_">then</span>(<span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line"><span class="comment">// p3的then</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(res)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 5. Promise是如何解决回调地狱的呢?</span></span><br><span class="line"><span class="comment">// Promise通过链式调用解决回调地狱</span></span><br><span class="line"><span class="comment">// 链式调用: 在上一个then里 返回下一个Promise实例 就可以继续后面的then</span></span><br></pre></td></tr></table></figure><h2 id="29-JS异步微任务-宏任务"><a href="#29-JS异步微任务-宏任务" class="headerlink" title="29.JS异步微任务-宏任务"></a>29.JS异步微任务-宏任务</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1. JS是单线程语言: CPU在同一时间只能做一个任务</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. JS代码分为: 同步任务和异步任务</span></span><br><span class="line"><span class="comment">// 同步任务(默认): 立即执行</span></span><br><span class="line"><span class="comment">// 异步任务: 会把异步任务放在任务队列中 (事件、定时器、ajax、Promise的then、await)</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 3. ES6之后异步做了划分: 微任务和宏任务</span></span><br><span class="line"><span class="comment">// 宏任务: 事件、定时器、ajax、script(是特殊的宏任务 不属于异步)</span></span><br><span class="line"><span class="comment">// 微任务: Promise的then、await</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 4. 事件循环: JS编译器 解析与执行代码的规则 所有JS代码都是事件循环规则</span></span><br><span class="line"><span class="comment">// 1. 默认解析script代码 (默认宏任务)</span></span><br><span class="line"><span class="comment">// 2. 判断代码是同步还是异步任务</span></span><br><span class="line"><span class="comment">// 3. 如果是同步代码: 立即执行</span></span><br><span class="line"><span class="comment">// 4. 如果是异步代码: 不会执行 而是放入任务队列中</span></span><br><span class="line"><span class="comment">// 5. 微任务放入微任务中 宏任务放入宏任务中</span></span><br><span class="line"><span class="comment">// 6. 当前所有同步都执行完毕后 才开始执行异步任务</span></span><br><span class="line"><span class="comment">// 7. 执行异步时 先执行微任务 后执行宏任务</span></span><br><span class="line"><span class="comment">// 8. 事件循环: 按照上面的规则反复的执行每一个宏任务</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">1</span>)</span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">2</span>)</span><br><span class="line">    <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">3</span>)</span><br><span class="line">        <span class="title function_">resolve</span>()</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">4</span>)</span><br><span class="line">    &#125;).<span class="title function_">then</span>(<span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">5</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">6</span>)</span><br><span class="line">&#125;, <span class="number">0</span>)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">7</span>)</span><br><span class="line"><span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">8</span>)</span><br><span class="line">    <span class="title function_">resolve</span>()</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">9</span>)</span><br><span class="line">&#125;).<span class="title function_">then</span>(<span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">10</span>)</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// 1 7 8 9 10 2 6 3 4 5</span></span><br></pre></td></tr></table></figure><h2 id="30-跨域的概念"><a href="#30-跨域的概念" class="headerlink" title="30.跨域的概念"></a>30.跨域的概念</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1. 当页面发生跨域, 就会产生一个固定格式的报错</span></span><br><span class="line"><span class="comment">// 只要是跨域, 就一定会出现下面这种格式的报错, 但这种格式报错原因有很多, 比如基地址错误、服务器内部问题、跨度都有可能出现这种错误</span></span><br><span class="line"><span class="comment">// Access to XMLHttpRequest at &#x27;ajax请求网址&#x27; from origin &#x27;页面网址&#x27; has been blocked by CORS policy: No &#x27;Access-Control-Allow-Origin&#x27; header is present on the requested resource.</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. 跨域是什么: ajax地址 和 页面地址 不同源</span></span><br><span class="line"><span class="comment">// ajax地址: 跨域只会出现在ajax请求中, 其他的请求没有跨域</span></span><br><span class="line"><span class="comment">// 页面地址: location.href地址栏</span></span><br><span class="line"><span class="comment">// 不同源: 浏览器同源策略: 协议名、端口号、主机ip都一致</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 页面地址: http://127.0.0.1:3000</span></span><br><span class="line"><span class="comment">// ajax1: http://127.0.0.1:3000/list 同源</span></span><br><span class="line"><span class="comment">// ajax2: http://127.0.0.1:5000 不同源 端口号不一样</span></span><br><span class="line"><span class="comment">// ajax4: https://127.0.0.1:3000 不同源 协议名不一致 </span></span><br><span class="line"><span class="comment">// ajax3: http://localhost:3000 不同源 ip不一致</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 3. 同源策略是一种安全策略: 浏览器为了安全</span></span><br><span class="line"><span class="comment">// 出于安全考虑, 浏览器不允许页面向不同源的接口请求数据, 因为如果接口和网页不同源, 浏览器认为是2个不同的 服务器</span></span><br><span class="line"><span class="comment">// 当使用ajax请求地址时, 与当前页面地址不一致时, 浏览器会认为给不同服务器发送了请求</span></span><br><span class="line"><span class="comment">// 可能导致数据泄露, 因此会拒绝接收服务器的数据</span></span><br><span class="line"><span class="comment">// 跨域: 服务器可以收到请求, 也响应了请求, 但响应的数据被浏览器拒收了</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 4. 如何解决跨域? </span></span><br><span class="line"><span class="comment">// 1. CORS技术: 后台设置允许跨域的响应头</span></span><br><span class="line"><span class="comment">// 应用场景: 前提是后台是自己的 </span></span><br><span class="line"><span class="comment">// res.setHeader(&#x27;Access-Control-Allow-Origin&#x27;, &#x27;*&#x27;)</span></span><br><span class="line"><span class="comment">// 参数: 1.响应头名字 2.响应头值 *为所有网站都可以</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. 代理服务器</span></span><br><span class="line"><span class="comment">// 代理服务器: 帮你转发请求的服务器</span></span><br><span class="line"><span class="comment">// 使用代理: 转发请求-使用axios库: 前后端通用</span></span><br><span class="line"><span class="comment">// 将数据返回给浏览器 (服务器不能直接给对象, 需转换为json)</span></span><br><span class="line"></span><br></pre></td></tr></table></figure><h2 id="31"><a href="#31" class="headerlink" title="31."></a>31.</h2><h2 id="32"><a href="#32" class="headerlink" title="32."></a>32.</h2><h2 id="33"><a href="#33" class="headerlink" title="33."></a>33.</h2><h2 id="34"><a href="#34" class="headerlink" title="34."></a>34.</h2><h2 id="35"><a href="#35" class="headerlink" title="35."></a>35.</h2></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">本文作者:</span> <span class="post-copyright-info"><a href="https://webxc.eu.org">XC's Blog</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">本文链接:</span> <span class="post-copyright-info"><a href="https://webxc.eu.org/post/ds23/">https://webxc.eu.org/post/ds23/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明:</span> <span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://webxc.eu.org" target="_blank">XC's Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E9%9D%A2%E8%AF%95%E9%A2%98/">面试题</a></div><div class="post_share"><div class="social-share" data-image="https://cdn1.tianli0.top/gh/web-xc/iMG/postss/vue.png" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://npm.elemecdn.com/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload='this.media="all"'><script src="https://npm.elemecdn.com/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><div class="post-reward"><div class="reward-button"><i class="fas fa-qrcode"></i> 打赏</div><div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="https://npm.elemecdn.com/webxc@1.0.0/lxfs/wechat.png" target="_blank"><img class="post-qr-code-img" src="https://npm.elemecdn.com/webxc@1.0.0/lxfs/wechat.png" alt="Wechat"></a><div class="post-qr-code-desc">Wechat</div></li><li class="reward-item"><a href="https://npm.elemecdn.com/webxc@1.0.0/lxfs/alipay.jpg" target="_blank"><img class="post-qr-code-img" src="https://npm.elemecdn.com/webxc@1.0.0/lxfs/alipay.jpg" alt="Alipay"></a><div class="post-qr-code-desc">Alipay</div></li></ul></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/post/fe33/"><img class="prev-cover" src="https://cdn1.tianli0.top/gh/web-xc/iMG/postss/vue.png" onerror='onerror=null,src="https://npm.elemecdn.com/webxc@1.0.2/banner/404.gif"' alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇文章</div><div class="prev_info">硅谷甄选运营平台</div></div></a></div><div class="next-post pull-right"><a href="/post/ds2s/"><img class="next-cover" src="https://cdn1.tianli0.top/gh/web-xc/iMG/postss/vue.png" onerror='onerror=null,src="https://npm.elemecdn.com/webxc@1.0.2/banner/404.gif"' alt="cover of next post"><div class="pagination-info"><div class="label">下一篇文章</div><div class="next_info">整个前端面试题</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/post/ds2s/" title="整个前端面试题"><img class="cover" src="https://cdn1.tianli0.top/gh/web-xc/iMG/postss/vue.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2023-08-31</div><div class="title">整个前端面试题</div></div></a></div></div></div><hr><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i> <span>评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="https://npm.elemecdn.com/webxc@1.0.0/logo/logo.jpg" onerror='this.onerror=null,this.src="https://npm.elemecdn.com/webxc@1.0.2/banner/404.gif"' alt="avatar"></div><div class="author-info__name">XC's Blog</div><div class="author-info__description">XC's Blog 记录生活和学习文章</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">95</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">25</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">25</div></a></div><div class="card-info-social-icons is-center"><a class="social-icon" href="https://tenapi.cn/qqzlk/?qq=2848141597" target="_blank" title="QQ"><i class="iconfont icon-QQ"></i></a><a class="social-icon" href="https://npm.elemecdn.com/webxc@1.0.0/lxfs/wechat.jpg" target="_blank" title="微信"><i class="iconfont icon-weixin"></i></a><a class="social-icon" href="https://github.com/web-xc" target="_blank" title="Github"><i class="iconfont icon-github"></i></a><a class="social-icon" href="https://space.bilibili.com/2134826455" target="_blank" title="BiliBili"><i class="iconfont icon-bilibili"></i></a><a class="social-icon" href="https://music.163.com/#/user/home?id=323682437" target="_blank" title="网易云音乐"><i class="iconfont icon-wyy"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">原网站因使用.ml域名被回收, 再加上本人因学习原因, 没怎么打理博客, 使用了https://webxc.eu.org域名来维持博客运行, 如果有加友联的朋友们, 去友联页看信息即可, 如果原来有加过的, 麻烦在原来域名后缀改一下(.ml ==> .eu.org)就行, 博客写的太乱了, 没时间打理, 兄弟们谅解😁😁~~</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E9%87%8D%E7%BB%98%E5%92%8C%E5%9B%9E%E6%B5%81"><span class="toc-number">1.</span> <span class="toc-text">1.重绘和回流</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E6%B5%8F%E8%A7%88%E5%99%A8%E6%98%AF%E5%A6%82%E4%BD%95%E8%BF%9B%E8%A1%8C%E7%95%8C%E9%9D%A2%E6%B8%B2%E6%9F%93%E7%9A%84"><span class="toc-number">1.0.1.</span> <span class="toc-text">1.浏览器是如何进行界面渲染的</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E9%87%8D%E7%BB%98%E5%92%8C%E5%9B%9E%E6%B5%81-%E9%87%8D%E6%8E%92"><span class="toc-number">1.0.2.</span> <span class="toc-text">2.重绘和回流(重排)</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E4%BC%9A%E5%AF%BC%E8%87%B4%E5%9B%9E%E6%B5%81%EF%BC%88%E9%87%8D%E6%8E%92%EF%BC%89%E7%9A%84%E6%93%8D%E4%BD%9C%EF%BC%9A"><span class="toc-number">1.0.3.</span> <span class="toc-text">3.会导致回流（重排）的操作：</span></a></li></ol></li></ol><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E4%B8%A4%E4%B8%AA%E5%AE%9A%E6%97%B6%E5%99%A8%E5%AF%B9%E6%AF%94"><span class="toc-number">2.</span> <span class="toc-text">2.两个定时器对比</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-JS%E6%89%A7%E8%A1%8C%E6%9C%BA%E5%88%B6"><span class="toc-number">3.</span> <span class="toc-text">3.JS执行机制</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E4%BD%9C%E7%94%A8%E5%9F%9F%E9%93%BE"><span class="toc-number">4.</span> <span class="toc-text">4.作用域链</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-%E9%97%AD%E5%8C%85"><span class="toc-number">5.</span> <span class="toc-text">5.闭包</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-this%E6%8C%87%E5%90%91"><span class="toc-number">6.</span> <span class="toc-text">6.this指向</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E5%AE%9E%E4%BE%8B%E5%8C%96%E8%BF%87%E7%A8%8B"><span class="toc-number">7.</span> <span class="toc-text">7.构造函数实例化过程</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-%E5%9F%BA%E6%9C%AC%E5%8C%85%E8%A3%85%E7%B1%BB%E5%9E%8B%E4%B9%9F%E6%9C%89%E5%B1%9E%E6%80%A7%E5%92%8C%E6%96%B9%E6%B3%95-%E4%B8%BA%E5%95%A5"><span class="toc-number">8.</span> <span class="toc-text">8.基本包装类型也有属性和方法 为啥?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9-%E5%86%85%E7%BD%AE%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E6%96%B9%E6%B3%95"><span class="toc-number">9.</span> <span class="toc-text">9.内置构造函数方法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#10-%E6%95%B0%E7%BB%84%E5%B8%B8%E8%A7%81%E6%96%B9%E6%B3%95"><span class="toc-number">10.</span> <span class="toc-text">10.数组常见方法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11-%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%B8%B8%E8%A7%81%E6%96%B9%E6%B3%95"><span class="toc-number">11.</span> <span class="toc-text">11.字符串常见方法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#12-%E5%8E%9F%E5%9E%8B%E5%AF%B9%E8%B1%A1prototype"><span class="toc-number">12.</span> <span class="toc-text">12. 原型对象prototype</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#13-constructor%E5%B1%9E%E6%80%A7"><span class="toc-number">13.</span> <span class="toc-text">13.constructor属性</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#constructor%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF"><span class="toc-number">13.1.</span> <span class="toc-text">constructor使用场景</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#14-%E5%AF%B9%E8%B1%A1%E5%8E%9F%E5%9E%8B-proto"><span class="toc-number">14.</span> <span class="toc-text">14.对象原型_proto__</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#15-%E5%8E%9F%E5%9E%8B%E7%BB%A7%E6%89%BF"><span class="toc-number">15.</span> <span class="toc-text">15.原型继承</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#16-%E5%8E%9F%E5%9E%8B%E9%93%BE%E4%B8%8Einstanceof%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">16.</span> <span class="toc-text">16.原型链与instanceof运算符</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#17-%E6%B5%85%E6%8B%B7%E8%B4%9D"><span class="toc-number">17.</span> <span class="toc-text">17.浅拷贝</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#18-%E6%B7%B1%E6%8B%B7%E8%B4%9D"><span class="toc-number">18.</span> <span class="toc-text">18.深拷贝</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E6%B5%85%E6%8B%B7%E8%B4%9D%E5%92%8C%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%8F%AA%E9%92%88%E5%AF%B9%E5%BC%95%E7%94%A8%E7%B1%BB%E5%9E%8B"><span class="toc-number">18.1.</span> <span class="toc-text">1.浅拷贝和深拷贝只针对引用类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E7%9A%84"><span class="toc-number">18.2.</span> <span class="toc-text">2.深拷贝如何实现的?</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#19-this%E6%8C%87%E5%90%91%E7%9A%84%E4%B8%89%E7%A7%8D%E6%96%B9%E6%B3%95"><span class="toc-number">19.</span> <span class="toc-text">19.this指向的三种方法</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-call%E5%92%8Capply%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">19.1.</span> <span class="toc-text">1.call和apply的区别</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-this-bind%E6%96%B9%E6%B3%95"><span class="toc-number">19.2.</span> <span class="toc-text">2. this.bind方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF"><span class="toc-number">19.3.</span> <span class="toc-text">3.应用场景:</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#20-%E9%98%B2%E6%8A%96%E4%BB%A5%E5%8F%8A%E5%BA%95%E5%B1%82%E5%AE%9E%E7%8E%B0"><span class="toc-number">20.</span> <span class="toc-text">20.防抖以及底层实现</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#21-%E8%8A%82%E6%B5%81%E4%BB%A5%E5%8F%8A%E5%BA%95%E5%B1%82%E5%AE%9E%E7%8E%B0"><span class="toc-number">21.</span> <span class="toc-text">21.节流以及底层实现</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#22-Ajax%E6%8E%A5%E5%8F%A3%E8%AF%B7%E6%B1%82%E8%BF%87%E7%A8%8B"><span class="toc-number">22.</span> <span class="toc-text">22.Ajax接口请求过程</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#23-HTTP%E7%8A%B6%E6%80%81%E7%A0%81"><span class="toc-number">23.</span> <span class="toc-text">23.HTTP状态码</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#24-restful%E6%8E%A5%E5%8F%A3%E8%A7%84%E8%8C%83"><span class="toc-number">24.</span> <span class="toc-text">24.restful接口规范</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Get%E5%92%8CPost%E8%AF%B7%E6%B1%82%E5%8C%BA%E5%88%AB"><span class="toc-number">24.1.</span> <span class="toc-text">Get和Post请求区别:</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E4%BC%A0%E5%8F%82%E6%96%B9%E5%BC%8F%E4%B8%8D%E4%B8%80%E6%A0%B7"><span class="toc-number">24.1.1.</span> <span class="toc-text">1.传参方式不一样</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E4%BC%A0%E5%8F%82%E9%80%9F%E5%BA%A6-get%E6%9B%B4%E5%BF%AB-%E7%9B%B4%E6%8E%A5url%E6%9F%A5%E6%89%BE"><span class="toc-number">24.1.2.</span> <span class="toc-text">2.传参速度 get更快 直接url查找</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E4%BC%A0%E5%8F%82%E6%95%B0%E6%8D%AE%E5%A4%A7%E5%B0%8F%E4%B8%8D%E4%B8%80%E6%A0%B7"><span class="toc-number">24.1.3.</span> <span class="toc-text">3.传参数据大小不一样</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-%E5%AE%89%E5%85%A8%E6%80%A7-post%E6%9B%B4%E9%AB%98"><span class="toc-number">24.1.4.</span> <span class="toc-text">4.安全性 post更高</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#25-Ajax%E7%9A%84XMLHttpRequest%E5%8E%9F%E7%90%86"><span class="toc-number">25.</span> <span class="toc-text">25.Ajax的XMLHttpRequest原理</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#26-Promise%E4%BD%9C%E7%94%A8"><span class="toc-number">26.</span> <span class="toc-text">26.Promise作用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#27-Promise%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86"><span class="toc-number">27.</span> <span class="toc-text">27.Promise工作原理</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-Promise%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF-x2F-%E5%8E%9F%E7%90%86-Promise%E5%AF%B9%E8%B1%A1%E6%9C%89%E4%B8%89%E7%A7%8D%E7%8A%B6%E6%80%81"><span class="toc-number">27.1.</span> <span class="toc-text">1.Promise应用场景&#x2F;原理 Promise对象有三种状态:</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-Promise%E5%AF%B9%E8%B1%A1%E7%8A%B6%E6%80%81%E5%8F%AA%E6%9C%89%E4%B8%A4%E7%A7%8D%E7%8A%B6%E6%80%81"><span class="toc-number">27.2.</span> <span class="toc-text">2.Promise对象状态只有两种状态:</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-Promise%E7%8A%B6%E6%80%81%E5%8F%91%E7%94%9F%E6%94%B9%E5%8F%98%E5%90%8E-%E5%9C%A8%E4%BB%BB%E4%BD%95%E6%97%B6%E5%80%99%E9%83%BD%E5%8F%AF%E4%BB%A5%E8%8E%B7%E5%8F%96%E7%BB%93%E6%9E%9C"><span class="toc-number">27.3.</span> <span class="toc-text">3.Promise状态发生改变后 在任何时候都可以获取结果</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-Promise%E5%9C%A8%E5%88%9B%E5%BB%BA%E5%AE%9E%E4%BE%8B%E6%97%B6-%E9%87%8C%E9%9D%A2%E4%BB%A3%E7%A0%81%E4%BC%9A%E7%AB%8B%E5%8D%B3%E6%89%A7%E8%A1%8C"><span class="toc-number">27.4.</span> <span class="toc-text">4.Promise在创建实例时 里面代码会立即执行</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#28-Promise%E4%BD%BF%E7%94%A8%E9%93%BE%E5%BC%8F%E8%AF%AD%E6%B3%95%E8%A7%A3%E5%86%B3%E5%9B%9E%E8%B0%83%E5%9C%B0%E7%8B%B1"><span class="toc-number">28.</span> <span class="toc-text">28.Promise使用链式语法解决回调地狱</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#29-JS%E5%BC%82%E6%AD%A5%E5%BE%AE%E4%BB%BB%E5%8A%A1-%E5%AE%8F%E4%BB%BB%E5%8A%A1"><span class="toc-number">29.</span> <span class="toc-text">29.JS异步微任务-宏任务</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#30-%E8%B7%A8%E5%9F%9F%E7%9A%84%E6%A6%82%E5%BF%B5"><span class="toc-number">30.</span> <span class="toc-text">30.跨域的概念</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#31"><span class="toc-number">31.</span> <span class="toc-text">31.</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#32"><span class="toc-number">32.</span> <span class="toc-text">32.</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#33"><span class="toc-number">33.</span> <span class="toc-text">33.</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#34"><span class="toc-number">34.</span> <span class="toc-text">34.</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#35"><span class="toc-number">35.</span> <span class="toc-text">35.</span></a></li></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/post/ds2s/" title="整个前端面试题"><img src="https://cdn1.tianli0.top/gh/web-xc/iMG/postss/vue.png" onerror='this.onerror=null,this.src="https://npm.elemecdn.com/webxc@1.0.2/banner/404.gif"' alt="整个前端面试题"></a><div class="content"><a class="title" href="/post/ds2s/" title="整个前端面试题">整个前端面试题</a><time datetime="2023-08-31T02:00:00.000Z" title="发表于 2023-08-31 02:00:00">2023-08-31</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/post/ds23/" title="常见前端面试题"><img src="https://cdn1.tianli0.top/gh/web-xc/iMG/postss/vue.png" onerror='this.onerror=null,this.src="https://npm.elemecdn.com/webxc@1.0.2/banner/404.gif"' alt="常见前端面试题"></a><div class="content"><a class="title" href="/post/ds23/" title="常见前端面试题">常见前端面试题</a><time datetime="2023-08-28T18:30:00.000Z" title="发表于 2023-08-28 18:30:00">2023-08-28</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/post/fe33/" title="硅谷甄选运营平台"><img src="https://cdn1.tianli0.top/gh/web-xc/iMG/postss/vue.png" onerror='this.onerror=null,this.src="https://npm.elemecdn.com/webxc@1.0.2/banner/404.gif"' alt="硅谷甄选运营平台"></a><div class="content"><a class="title" href="/post/fe33/" title="硅谷甄选运营平台">硅谷甄选运营平台</a><time datetime="2023-07-26T03:55:00.000Z" title="发表于 2023-07-26 03:55:00">2023-07-26</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2021 - 2023 By XC's Blog</div><div class="framework-info"><span></span> <a target="_blank" rel="noopener" href="https://icp.gov.moe/?keyword=20235221">萌ICP备20235221号</a><span class="footer-separator">|</span><span></span> <a target="_blank" rel="noopener" href="https://icp.gov.moe/">萌ICP查询</a><div id="running-time"></div></div><script>setInterval((()=>{let e=Math.round(new Date("2021-11-21 01:35:06").getTime()/1e3),t=Math.round(((new Date).getTime()+288e5)/1e3)-e,n=new Array(0,0,0,0,0);t>=31536e3&&(n[0]=parseInt(t/31536e3),t%=31536e3),t>=86400&&(n[1]=parseInt(t/86400),t%=86400),t>=3600&&(n[2]=parseInt(t/3600),t%=3600),t>=60&&(n[3]=parseInt(t/60),t%=60),t>0&&(n[4]=t),currentTimeHtml="本站已安全运行 "+n[0]+" 年 "+n[1]+" 天 "+n[2]+" 时 "+n[3]+" 分 "+n[4]+" 秒",document.getElementById("running-time").innerHTML=currentTimeHtml}),1e3)</script></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i><span id="percent">0<span>%</span></span></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight,500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i> <span>正在载入文件,请稍后</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"></div></div><hr><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="https://npm.elemecdn.com/hexo-theme-butterfly/source/js/utils.js"></script><script src="https://npm.elemecdn.com/hexo-theme-butterfly@4.4.0/source/js/main.js"></script><script src="https://npm.elemecdn.com/@fancyapps/ui/dist/fancybox.umd.js"></script><script src="https://npm.elemecdn.com/instant.page/instantpage.js" type="module"></script><script src="https://npm.elemecdn.com/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="https://npm.elemecdn.com/node-snackbar/dist/snackbar.min.js"></script><script src="https://npm.elemecdn.com/hexo-theme-butterfly/source/js/search/local-search.js"></script><div class="js-pjax"><script>(()=>{const e=document.querySelectorAll("#article-container .mermaid-wrap");if(e.length){window.runMermaid=()=>{window.loadMermaid=!0;const t="dark"===document.documentElement.getAttribute("data-theme")?"dark":"default";Array.from(e).forEach(((e,n)=>{const d=e.firstElementChild,r="mermaid-"+n,m="%%{init:{ 'theme':'"+t+"'}}%%\n"+d.textContent;mermaid.mermaidAPI.render(r,m,(e=>{d.insertAdjacentHTML("afterend",e)}))}))};const t=()=>{window.loadMermaid?runMermaid():getScript("https://npm.elemecdn.com/mermaid/dist/mermaid.min.js").then(runMermaid)};window.pjax?t():document.addEventListener("DOMContentLoaded",t)}})()</script><script>(()=>{const o=()=>{twikoo.init(Object.assign({el:"#twikoo-wrap",envId:"https://blog2.webxc.eu.org/",region:"",onCommentLoaded:function(){btf.loadLightbox(document.querySelectorAll("#twikoo .tk-content img:not(.tk-owo-emotion)"))}},null))},t=()=>{"object"!=typeof twikoo?getScript("https://npm.elemecdn.com/twikoo@1.6.16/dist/twikoo.all.min.js").then(o):setTimeout(o,0)};t()})()</script></div><script data-pjax="false" defer src="https://npm.elemecdn.com/webxc@1.0.16/css/style.js"></script><script defer src="https://npm.elemecdn.com/hexo-theme-butterfly@4.4.0/source/js/search/local-search.js"></scrip><script src="https://npm.elemecdn.com/butterfly-extsrc/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful=!0,POWERMODE.shake=!0,POWERMODE.mobile=!0,document.body.addEventListener("input",POWERMODE)</script><script src="https://npm.elemecdn.com/pjax@0.2.8/pjax.min.js"></script><script>let pjaxSelectors=["head > title","#config-diff","#body-wrap","#rightside-config-hide","#rightside-config-show",".js-pjax",".tk-comments-container"];var pjax=new Pjax({elements:'a:not([target="_blank"])',selectors:pjaxSelectors,cacheBust:!1,analytics:!1,scrollRestoration:!1});document.addEventListener("pjax:send",(function(){if(window.tocScrollFn&&window.removeEventListener("scroll",window.tocScrollFn),window.scrollCollect&&window.removeEventListener("scroll",scrollCollect),"object"==typeof preloader&&preloader.initLoading(),document.getElementById("rightside").style.cssText="opacity: ''; transform: ''",window.aplayers)for(let e=0;e<window.aplayers.length;e++)window.aplayers[e].options.fixed||window.aplayers[e].destroy();"object"==typeof typed&&typed.destroy();const e=document.body.classList;e.contains("read-mode")&&e.remove("read-mode"),"object"==typeof disqusjs&&disqusjs.destroy()})),document.addEventListener("pjax:complete",(function(){window.refreshFn(),document.querySelectorAll("script[data-pjax]").forEach((e=>{const t=document.createElement("script"),o=e.text||e.textContent||e.innerHTML||"";Array.from(e.attributes).forEach((e=>t.setAttribute(e.name,e.value))),t.appendChild(document.createTextNode(o)),e.parentNode.replaceChild(t,e)})),GLOBAL_CONFIG.islazyload&&window.lazyLoadInstance.update(),"function"==typeof chatBtnFn&&chatBtnFn(),"function"==typeof panguInit&&panguInit(),"function"==typeof gtag&&gtag("config","",{page_path:window.location.pathname}),"object"==typeof _hmt&&_hmt.push(["_trackPageview",window.location.pathname]),"function"==typeof loadMeting&&document.getElementsByClassName("aplayer").length&&loadMeting(),"object"==typeof Prism&&Prism.highlightAll(),"object"==typeof preloader&&preloader.endLoading()})),document.addEventListener("pjax:error",(e=>{404===e.request.status&&pjax.loadUrl("/404.html")}))</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><script data-pjax>function butterfly_swiper_injector_config(){var s=document.getElementById("recent-posts");console.log("已挂载butterfly_swiper"),s.insertAdjacentHTML("afterbegin",'<div class="recent-post-item" style="height: auto;width: 100%"><div class="blog-slider swiper-container-fade swiper-container-horizontal" id="swiper_container"><div class="blog-slider__wrp swiper-wrapper" style="transition-duration: 0ms;"><div class="blog-slider__item swiper-slide" style="background:url(https://cdn1.tianli0.top/gh/web-xc/iMG/postss/vue.png);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2023-08-31</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/ds2s/&quot;);" href="javascript:void(0);" alt="">整个前端面试题</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://cdn1.tianli0.top/gh/web-xc/iMG/postss/vue.png);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2023-08-28</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/ds23/&quot;);" href="javascript:void(0);" alt="">常见前端面试题</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://cdn1.tianli0.top/gh/web-xc/iMG/postss/vue.png);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2023-07-26</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/fe33/&quot;);" href="javascript:void(0);" alt="">硅谷甄选运营平台</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://cdn1.tianli0.top/gh/web-xc/iMG/postss/vue.png);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2023-07-17</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/ew32/&quot;);" href="javascript:void(0);" alt="">Vue第三天</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://cdn1.tianli0.top/gh/web-xc/iMG/postss/vue.png);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2023-07-16</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/aw92/&quot;);" href="javascript:void(0);" alt="">Vue第二天</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://cdn1.tianli0.top/gh/web-xc/iMG/postss/vue.png);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2023-07-14</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/ou67/&quot;);" href="javascript:void(0);" alt="">Vue第一天</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://cdn1.tianli0.top/gh/web-xc/iMG/postss/vue.png);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2023-07-05</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/fn32/&quot;);" href="javascript:void(0);" alt="">Vue框架笔记</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://npm.elemecdn.com/webxc/cover/js1.webp);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2023-06-21</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/fe11/&quot;);" href="javascript:void(0);" alt="">Vue前置JS功底</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://cdn1.tianli0.top/gh/web-xc/iMG/postss/promise.webp);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2023-06-11</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/pr67/&quot;);" href="javascript:void(0);" alt="">ES6-Promise语法与原理</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://cdn1.tianli0.top/gh/web-xc/iMG/postss/ajax.webp);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2023-06-08</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/or01/&quot;);" href="javascript:void(0);" alt="">Ajax第四天</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://cdn1.tianli0.top/gh/web-xc/iMG/postss/ajax.webp);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2023-06-07</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/fs67/&quot;);" href="javascript:void(0);" alt="">Ajax第三天</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://npm.elemecdn.com/webxc/cover/js1.webp);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2023-05-11</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/fe66/&quot;);" href="javascript:void(0);" alt="">JS进阶第四天</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://npm.elemecdn.com/webxc/cover/js1.webp);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2023-05-10</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/fe99/&quot;);" href="javascript:void(0);" alt="">JS进阶第三天</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://npm.elemecdn.com/webxc/cover/js1.webp);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2023-05-05</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/us87/&quot;);" href="javascript:void(0);" alt="">JS进阶第二天</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://npm.elemecdn.com/webxc@1.0.12/cover/cover15.jpg);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2022-10-31</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/2db5/&quot;);" href="javascript:void(0);" alt="">移动开发-Flex布局</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://npm.elemecdn.com/webxc@1.0.12/cover/cover16.jpg);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2022-11-14</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/1c7e/&quot;);" href="javascript:void(0);" alt="">移动开发-媒体查询</a><div class="blog-slider__text">点击查看</div></div></div><div class="blog-slider__item swiper-slide" style="background:url(https://npm.elemecdn.com/webxc@1.0.12/cover/cover17.jpg);border-radius:12px;opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><div class="blog-slider__content"><span class="blog-slider__code">2022-11-17</span><a class="blog-slider__title" onclick="pjax.loadUrl(&quot;post/7fc/&quot;);" href="javascript:void(0);" alt="">移动开发-响应式</a><div class="blog-slider__text">点击查看</div></div></div></div><div class="blog-slider__pagination swiper-pagination-clickable swiper-pagination-bullets"></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div></div>')}for(var elist="null".split(","),cpage=location.pathname,epage="all",flag=0,i=0;i<elist.length;i++)cpage.includes(elist[i])&&flag++;("all"===epage&&0==flag||epage===cpage)&&butterfly_swiper_injector_config()</script><script defer src="https://npm.elemecdn.com/webxc@1.0.12/css/swiper/swiper.min.js"></script><script defer data-pjax src="https://npm.elemecdn.com/webxc@1.0.12/css/swiper/swiper_init.js"></script></body></html>